Introduction to TypeScript. Setup

TypeScript is a superset of JavaScript, that means JavaScirpt code is valid code in Typescript.

Differences between JavaScript and TypeScript

So, what does TypeScript add to JavaScript, that makes it so useful?

We know that JavaScript is a dynamic typing language, that allows us not to bother by explicitely declaring variables types and a variable can change its type at runtime.

Why would we not want that? Let's look at a JavaScript example:

function f() {

}

console.log(f + 1); //'function f(){}1'

Logically, we would expect an error to occur when we try to use addition on functions. However, JavaScript runtime implicitely converts both data types into String and does string concatenation.

TypeScript adds static typing to JavaScript. That means TypeScript also needs a compiler to check variable types before running a program, but after compilation we get the same old JavaScirpt code.

Let's return to the example and rewrite it in TypeScript:

function f():void {

}

console.log(f + 1);

At the compilation time it will show us an error Operator '+' cannot be applied to types '() => void' and 'number'. Good to know!

Plain TypeScript setup

Let's try to use TypeScript for a project created from scratch using npm.

1. Create an empty folder "typescript-practice".
2. Inside the folder run npm init -y.
3. Install typescript npm i -D typescript.
4. Create typescript configuration file npx tsc --init.

5. Create a new file script.ts:
   

   //script.ts
   const str: string = 'hello';
   console.log(str);
   

6. We know that to execute JavaScript code we can use node script.js command. However, for TypeScript we should first compile it:

   • run command tsc. It creates a new file script.js.
   • execute this file by node script.js.

We can create a script for these two commands inside package.json:

...
  "scripts": {
    "dev": "tsc && node script.js"
  },
...

TypeScript setup with Vite bundler

You almost never have to make project from scratch, much more often you use some kind of bundler. Let's see how to setup typescript with vite:

1. Go to a directory where you want to create a project.
2. Run npm init vite@latest typescript-vite-practice -- --template vanilla-ts.
   • vanilla-ts template tells vite that we don't use any framework like react, vue etc.
3. Open the project in a code editor and run npm install.
4. Run npm run dev and open the link in the browser.

TypeScript compiler

It works fine but pay attention to the fact that Vite doesn't perform type checking. We have to take care of it by the IDE and build process. We can run in CLI tsc command, that stands for "TypeScript Compiler".

TypeScript configuration file (tsconfig.json)

Inside the configuration file there are multiple properties, but we look at the most valuable ones for us:

• "include" - specifies directory for files that need to be compiled. Usually, it looks like this: "include": ["./src"].

CompilerOptions

• "target" - specifies the version of JavaScript code you want as output;
• "module" - how modules are imported and exported;
• "rootDir" - where to start looking for the TypeScript code;
• "allowJs" - whether to allow project to have JavaScript files;
• "strict" - not allow to compile the code if there are any TypeScript errors that are being strictly checked;

Comments

[Majid Ali]

helpfull