What is TypeScript?
If you’re using JavaScript, chances are you have heard of TypeScript. You may also know that TypeScript is a superset of JavaScript. But what does this mean? Well, TypeScript has been built on top of JavaScript. It uses the same syntax, with some added features.
Why is this helpful? TypeScript helps us write cleaner code with less bugs at runtime. It does this by compiling our TypeScript code into JavaScript. It can help create workarounds to bugs we would not have otherwise known existed! While this is helpful to know, I am going to dive into the basics of TypeScript so that you can better understand how and why we use it.
You may have guessed it, but TypeScript’s added functionality has everything to do with declaring variable types. In this article, I will discuss the basic types in TS and why we should use them.
Number, String
These are two primitive types that are the same in both JavaScript and TypeScript. When declared as a type, the code will throw a compiler error if the variable values do not match their assigned type. Here is an example of how we declare variables with these types.
const num: number;
const hi: string;
Now if we try to assign num to anything except for a number or hi to anything except for a string, we will get a compiler error.
Boolean
This primitive value is similar to its JavaScript counterpart, however it ONLY accepts true or false. TypeScript does not handle truthy or falsey values.
Objects
Using TypeScript with objects is where things really start to get useful in my opinion. We can declare an object type as well as what values the objects hold should be. For example, if we want to have an array of strings, we would declare it like so:
const myArr: string[ ];
Then if we try
myArr = [‘hello’, ‘hi’]
TypeScript is happy. However, if we were to try and assign an array with values of type number, we would get a compiler error.
We can also declare object key value types like so:
const myObj = {name: string, age: number}
Tuples
Tuples are another way of assigning types to objects, but with tuples we can be much more specific about our object structure. For example, if we want to declare an array who’s index 0 is ALWAYS a number and index 1 is ALWAYS a string, we would declare the array like so:
let myArr: [number, string]
This will throw a compiler error if we try to assign anything to myArr that does not follow the specific formula
Enum
Enum’s allow us to define a set of named constants, making it easier to document intent or create a set of distinct cases. To me, this reminds me of how we structure our action variables in a React/Redux application. We want certain values, that describe an action, to be the same everywhere in our code. We could set an enum up like so:
enum Todos { CREATE_TODO, UPDATE_TODO,DELETE_TODO }
Values in enums are automatically assigned an index. Unless you specify otherwise, it will use zero based indexing. So if we were in a React/Redux application and wanted to use any of the variables in our Todos enum, we could access it like so.
function (Todos.CREATE_TODO) {//do something here}
Functions
Type script also allows us to define our function inputs and outputs. This can be very helpful in larger projects where a small unexpected type return could cause a cascade of errors and be difficult to find. To declare argument types in a function, we follow this syntax:
function doSomething(thing1: number, thing2: number){}
Now if we want to declare what the function should return, we add the type after the arguments bracket like so:
function doSomething(thing1: number, thing2: number): number {}
We also have the option to declare the return type as void. This may look familiar if you have experience with other typed programming languages. In TypeScript, this means that we are not expecting any return value from the function.
This was a high level overview of TypeScript, its different types and some use cases. If you enjoyed the article, give me some claps below! Look out for more articles going more in depth on TypeScript coming soon.