How to get started with TypeScript
Tags: javascript, typescript
Published: 2020-02-19 20:16:06

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 :
```cli
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 :
```js
let myNumber = 10;
```
In plain JS, you can re-asign the number variable to a string :
```js
myNumber = "Non-typed variable";
```
As you may notice, it’s not very practicable. So, to specify the type of the variable, which is number :
```js
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 :
```js
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 :
```js
function fooBar(foo: string, bar: boolean)…
```
If you want a parameter to be optional, just add a ? after the name :
```js
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 :
```js
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 :
```js
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 :
```js
function someFunction(foo: FoorBar) {
    console.log(foo);
}
// print 'World
someFunction(FooBar.BAR);
```

## Compiling
When you install TypeScript, a command line is added :
```cli
tsc
```
You can provide flags in the command itself, but it’s better to create a tsconfig.js file :
```json
{
  "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 :
```cli
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 !