DEV Community

Cover image for How to get started with TypeScript
Tom Lienard
Tom Lienard

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

myNumber = "Non-typed variable";
Enter fullscreen mode Exit fullscreen mode

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

let myNumber: number = 10;
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

function fooBar(foo: string, bar?: boolean)
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Compiling

When you install TypeScript, a command line is added :

tsc
Enter fullscreen mode Exit fullscreen mode

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
  ]
}
Enter fullscreen mode Exit fullscreen mode

To compile TS to JS, run this command :

tsc –w
Enter fullscreen mode Exit fullscreen mode

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 !

Top comments (0)