Introduction to TypeScript 👩💻
Hello guys, you might have probably heard the popular name "TypeScript" if you are into Web Development world. I had recetly started using TypeScript in my React Project 1-2 months back and I loved it. At first, it was difficult to code in TypeScript, but trust me, once you get the taste of TypeScript and the cool "Intelli Sense" in your code editor, you'd never want to go back to normal JavaScript. It just makes your JS development life a lot easier.
What does it do?
TypeScript provides type definitions to your JavaScript code which makes the development process a lot faster and also helps to catch bugs easily.
Setup Typescript in your project
To include TypeScript into your project, install Typescript as a dev dependency by typing.
or
Now, we need ts-node. ts-node is a Node.js package used to execute TypeScript files or run TypeScript in a REPL environment.
or
We also need to generate a file which has all the typescript configurations for our project. To initialise a tsconfig.json, type the following command.
You will see that a file like this is generated in the root folder of your project.
Create a file called and paste the following code
Now type in your terminal to get the output.
If you want to compile your TypeScript code to JavaScript code type , and you will see that a index.js file has been generated in your project.
TypeScript Basics
Primitive Data types
There are three primitive data types in JavaScript i.e. , and . To create a variable with typed definition in TypeScript -
To provide data types to variables, you can simple define their type by adding a colon infront of the variable. However, this is not needed in this case as TypeScript will automatically infer its data type automatically.
Arrays
Arrays can be created the same way as the normal variables are created. You just have to add with the data type. For example, if you want to create an array of strings, you could do something like this
It is to be noted that if you have created an array using data type, you could only provide string elements in the array or else typescript will throw you an error
Any
TypeScript also has a any data type which can be used to prevent a particular value causing type checking errors. For example, in the previous example, we could do something like this, and TypeScript won't show you an errror.
However, it is recommended not to use data type, because it can cause bugs. One good use case of is that, when you don't know the type of the data before-hand, you can use to stop showing errors.
Functions
TypeScript allows you to type your functions by typing parameters and return value.
However, you don't always need to specify your return value explicitly, typescript is smart enough to infer the return value from the return statement itself.
Object Types
One of the most common data structures that will be using in javascript is Objects. Typescript can help you provide typed definitions to your objects as well. If you create an object like this and hover over the user, it will show you the shape of the object, which is automatically inferred by typecript
You can type your objects just as you create a normal object in parenthesis and provide the object properties along with their type.
Type Aliases
What if you want to use the same typed definition for different objects? Writing definitions for different objects can be quite repetitive. A type alias can help you with this. You can create your own types using type aliases and use them.
In this example, a type id created and used as a type definition for multiple objects having the same type of data.
You can also use Type Aliases to type functions like this.
Interfaces
An interface is kind of same as type except there are few differences between them. We can rewrite the above example using Interface like this.
Learning TypeScript at first can be tough, but trust me it pays off afterwards. Here are few resources from where you can learn TypeScript
Youtube Videos
{% youtube BCg4U1FzODs %} {% youtube gp5H0Vw39yw %}
TypeScript Docs - https://www.typescriptlang.org/docs/
Thank You!!
Find me here - GitHub - https://github.com/shaan71845 Twitter - https://twitter.com/shaancodes Instagram - https://instagram.com/shaancodes LinkedIn - https://www.linkedin.com/in/shaan-alam-01784018a/