Let’s create a folder where will put our source code files, call it whatever you want then open the folder with your favorite code editor and let’s set up TypeScript.
First, we will need to install TypeScript globally in order to use it, for that let’s run the command:npm i -g typescript
Once the installation has finished, let’s create a file called index.ts where we will write our code.
To run this code just type in the terminal:tsc index.ts
By default, TypeScript will compile to ES3, which does not have support for async/await, so let’s see what happens when we try to write an async function and try to compile it.
Let’s run ''tsc index.ts'':
To do so we have two options:
● Pass command-line option to the compiler whenever we run tsc index.ts
● Create a configuration file, that contains all the options we want. These options will be picked whenever we run tsc index.js
Let’s create out configuration file tsconfig.json:
“watch”:true will assure that the code will be recompiled on every change, and we won’t need to run tsc index.js when we change something in the code.
Now let’s run tsc index.ts and see how index.js looks like!
The code changes and it supports async/await it looks the same as our TS code, and that’s a clue that our compiler is compiling the TS code to the latest JS version.
Let’s add another option to our tsconfig.json which is the “lib” option and it’s for the list of library files to be included in the compilation, and since we are developing frontend web we should include the dom library to compile our code with all the native dom classes.
There are two ways that you can strong-type your code: implicitly or explicitly.
Implicit typing means that the type will be automatically inferred when we assign a value to the declared variable.
Explicit typing means that we have to annotate our variable type when we’re declaring it.
First, we should specify a name for our type “CustomType” and then assign a type to it which is a string in our case. After that we can declare a variable annotated with CustomType type.
But this won’t make a big difference! we could just use string and there is no need to do all this!!
This was just a basic example to understand. With this feature we can create complex types by combining simple ones.
We can create a union type by separating types with a pipe. “With a union, we can declare that a type could be one of many types”
Our Style type can only be bold, italic or normal, and we can assign the font variable to those three specific values.
In most cases you’ll be strong-typing objects that have multiple properties with different types, let’s take a look at an example where we will have two objects:
In TypeScript we can enforce the shape of an object with an interface, just to guarantee that our object will always have the correct types and avoid generating bugs. If we knew that the shape of a person object will always be the same we can have an interface to define the types on each property. After that we can use this interface to strongly type these objects directly or use it as a return value from a function or as an argument etc…
Let's create our interface Person:
If you can have unexpected property in the future, or a property that will be not present in all person objects you can expect that in your interface by adding a key of type string that has a value of type any (can be anything).
When Strong-typing a function you should pay attention because you have types for the arguments and also the return value.
Let’s see some code:
In cases if you have a function that doesn’t return anything you have to put void as a return type.
You can force an array to have a specific type by adding the type followed by a brackets signifying that it’s an array:
In TypeScript, there is also the Tuple data structure, it’s a fixed length array where each item in that array has its own type.
And here we come to the end of our small tutorials, if you want to deep dive you can always check this resources: