In the last article, we talked about the features and differences between JavaScript and TypeScript. Now we will walk through an introductory tutorial of TypeScript for those who are already familiar with JavaScript, this article will focus mainly on TypeScript type system which is a key feature of this programming language.
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.
The compiler
TypeScript is JavaScript code that has types, so to declare a variable in TypeScript you can make type explicit in your code:
To run this code just type in the terminal:
tsc index.ts
You’ll notice that an index.js file is created, which is our actual JavaScript code that we can run in the browser or in node.
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”:
The TypeScript code will be transpiled into all this JavaScript code, just to let us use the async/await in out TypeScript function! To customize the compiler behavior and let it know to not compile TypeScript code to ES3, instead to compile it to the latest version of JavaScript.
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:
“target”:”esnext” we guarantee that the compiler will always compile our TypeScript code to the latest version of JavaScript.
“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.
Types annotation
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.
These types are the same as JavaScript built types, in TypeScript you can also build your own types! let’s see an example:
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).
Functions
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.
Arrays
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:
