A Short Introduction To TypeScript

TypeScript is a superset of JavaScript that builds upon it and makes it into a strong type language. A strong type language is one which defines the type of data upon variable declaration. The biggest benefit to this is the ability to see when a variable’s type is being changed to prevent errors down the road. Like changing a boolean flag into a number, or a counter variable into a string.

Installation and Configuration

Before using TS you will have to install it using this command: npm i -g typescript. From here you can make an index.ts file in your ide.

How to install with other library repositories.

By default TS compiles into ES3. To compile into the latest version of JS you would need to specify it when compiling the TS files or in the tsconfig.json file. To do that you can create that file and add this to it:

{
"compilerOptions": {
"target": "esnext"
}
}

An optional, but recommended is “watch”: true which will have the compiler watch for file saves and will recompile each time it detects a save.

There are some other options that can be added such as removing comments on compile and to flag the any type.

You would also want to add your other TS files in this config too. Read the config docs to learn more.

Types

It is not necessary to declare the variable type if you are assigning it a value at declaration. TS will assign that type to the variable based on the data assigned to it.

A variable declared “hello” has a string of “Hello” assigned to it. The hover pop-up shows that the “string” type was automatically assigned to the variable since that is what was assigned to it at declaration.
A variable declared “hello” has a string of “Hello” assigned to it. The hover pop-up shows that the “string” type was automatically assigned to the variable since that is what was assigned to it at declaration.
Hello has automatically been given the “string” type since a string was assigned to it at declaration.

Sometimes it can be hard to have the types inferred for us, which is where type declarations come into play. If you don’t have a value to assign to your variable upon declaration it is best practice to declare the type(s) you know that variable is going to hold. If you don’t then the any type will be assigned instead.

A variable is being declared with nothing assigned to it. The hover pop-up shows the data type assigned to this variable is “any” since there was no data type assigned to it at declaration.
A variable is being declared with nothing assigned to it. The hover pop-up shows the data type assigned to this variable is “any” since there was no data type assigned to it at declaration.
helloWorld was automatically given the “any” data type since no data type was assigned at declaration.

This means we can assign any datatype we want to it.

Reassigning the variable a number with no errors.
Reassigning the variable a number with no errors.
As we can see there are no errors when doing this.

However if we try to assign hello or world a number it will give us an error.

When trying to reassign the ‘hello’ variable a number we get this error: Type ‘number’ is not assignable to type ‘string’
When trying to reassign the ‘hello’ variable a number we get this error: Type ‘number’ is not assignable to type ‘string’
Error: Type ‘number’ is not assignable to type ‘string’

Object Shaping

One of the more common cases when type inference can be hard. Shaping objects can be done in many ways. It can be made to have only certain key/value pairs or can be made to have any amount of key/value pairs while requiring a few specific key/value pairs with it.

To do this we will need to make an interface and assigning it some keys and data assignments.

Now to use this interface we need to reference it when making our person object.

You can see there is an error with the isCoder key. If we uncomment [key: string]: any, the error will go away and we can assign more keys to the object. It is best practice not to use the any data type, i just used it here as an example.

Interfaces can be used in classes as well as functions.

Arguments are validated when the function is being invoked. Thus resulting in errors when the types do not match the parameters.

We can shape arrays in the same way as objects. Which allows us to make tuples in TS.

Let’s make a tuple type that expects a number first and then 2 string.

type tuple = [number, string, string,];

Now let’s make an array that is going to expect the items within it to be the tuple type that we just created.

let tupleArray: tuple[];

Now let’s see some of the errors we get when we try to push items in to this array that do not follow the shape of the tuples.

Compile

To compile your TS code use this command in your terminal: tsc or tsc index.ts. It will check your tsconfig.json file and compile all additional files and follow the compiler options specified. We can see all the errors my file generated since I left them all in:

Conclusion

Typescript is a perfect for making sure you are using functions in the way you built and intended them to be used by validating the arguments taken in and the items returned from it as well and also validating variable types so they do not change and cause errors down the line.

Software Engineering student at Operation Spark and WebDev hobbyist.