How to get started with TypeScript

Welcome to this guide of « How to get started with TypeScript ». What you need to follow this guide is :

• Basic knowledge of JavaScript
• NPM or Yarn installed
• An IDE like Visual Studio Code or Intellij/WebsStorm

And that’s all !
Now that you have everything you need to start, let’s follow along !

What is TypeScript ?

TypeScript is an evolution of JavaScript, created, developed and maintained by Microsoft. As in it’s name, it’s a typed evolution of JavaScript, which means your current JavaScript codes works in TypeScript. You can then compile your TypeScript code to a clean JavaScript code, which you can use without problems like any one.
TypeScript is also open-source, so everyone can contribute to this language.

Installing TypeScript

From your favorite command-line, create a fresh NPM project, and install TypeScript :

npm init -y
npm install -g typescript

Once done, create the index.ts file which come in every JS applications, but notice the extension .ts. You’re done for the installation !

TypeScript basics

Variables

In TypeScript, you can — and you should — specify the type of the variables. For instance, take this piece of code :

let myNumber = 10;

In plain JS, you can re-asign the number variable to a string :

myNumber = "Non-typed variable";

As you may notice, it’s not very practicable. So, to specify the type of the variable, which is number :

let myNumber: number = 10;

With this done, the type of myNumber is now set to number. And you can do this with string and boolean.

Functions

Type in functions is also very usefull. Take this exemple :

function fooBar(foo, bar) {
    console.log(foo + " " + bar);
}

You don’t know what type of variable is foo and bar. So, let’s do the same as upside :

function fooBar(foo: string, bar: boolean)…

If you want a parameter to be optional, just add a ? after the name :

function fooBar(foo: string, bar?: boolean)…

Pretty cool, isn’t it ?

Enums

If you came from Java, C… you are familiar with Enumerations. As in it’s name, it’s an enumeration of keys, but a exemple is better than words :

enum FooBar {
    FOO,
    BAR,
}
// print '0', because it’s the first index
console.log(FooBar.FOO);

By default, enums start with index 0, but you can specify the value you want :

enum FooBar {
    FOO = "Hello",
    BAR = "World",
}
// print 'Hello'
console.log(FooBar.FOO);

You can also specify function parameters to an enum, which is very usefull :

function someFunction(foo: FoorBar) {
    console.log(foo);
}
// print 'World
someFunction(FooBar.BAR);

Compiling

When you install TypeScript, a command line is added :

tsc

You can provide flags in the command itself, but it’s better to create a tsconfig.js file :

{
  "compilerOptions": {
    "outDir": "./dist", // Specify the out directory
    "allowJs": true,    // Allow plain JS
    "target": "es5",    // ES version to compile to
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./*"               // Include all your files
  ],
  "exclude": [
    "node_modules"      // Exclude node_modules folder
  ]
}

To compile TS to JS, run this command :

tsc –w

It will convert your TS to JS in the folder you specified, and the -w flag is to watch for changes and recompile automaticaly.

It’s the end of this brief introduction to TypeScript. Here is the link of the full documentation : https://www.typescriptlang.org/docs/handbook/basic-types.html
I hope it was interesting for you, and thanks for reading !