Going From Zero to Transpiling your First App in TypeScript

TypeScript is a superset of JavaScript, developed and maintained by Microsoft.

It adds additional features to JavaScript. In JavaScript, problems can only be detected during runtime, which may lead to issues being shipped to the end-user. TypeScript removes this problem by checking for any issue at compile time. This is called strict typing.

The following script will not raise any errors when using JavaScript, but if you use TypeScript, the compiler will show the error.

Typescript offers type check at compile time as opposed to runtime. and this is the main benefit of using TypeScript.

Apart from strict typing, TypeScript introduces many other features like Interfaces, Mixin classes, Enums and more. We will discuss them later in another article.

The browser doesn’t support TypeScript directly so It needs to be transpiled in JavaScript. In your tsconfig configuration file, you can specify which is the target language you want it transpiled to.

TypeScript and JavaScript can run in a single project together, In case you have a project and you want to migrate from JS to TS file by file, It can be done smoothly.

Now let's set up typescript in your system so you can write and run some code.

Setting up TypeScript Tools

Install Node.js (Higher than version 10):

  Visit the link for more details. <https://nodejs.org/en/>

  To check if it is installed, type `node -v` in the console. It will show you the installed version.

2. Install TypeScript

Using npm:

npm install -g typescript

To check if it is installed, type tsc-v in the console. It will show you the installed version.

Follow this link for other options https://www.typescriptlang.org/download.

3. Create your file with .ts extension, for example, main.ts, app.ts, etc.

4. Now let's write some code inside.

5. Transpile TypeScript File to JavaScript.

Go to the console and run your file, it will create a respective JavaScript file for the TS file.

You can now be able to see main.ts and main.js files in your project folder where main.js is the transpiled version of the main.ts file.

So now we are at the end of the TypeScript basic introduction and setup part. In this article, we learned about the advantages of TypeScript, how it works behind the scene, how to set it up in your system, and how to write and run your first TypeScript code.

Also published here