From JS to TS - A Learner`s Transition Guide

typescript web application javascript

Introduction to TypeScript

TypeScript is a strongly-typed, object-oriented programming language that is a super set of JavaScript. It is an open-source language developed and maintained by Microsoft. TypeScript adds optional static typing and class-based object-oriented programming to JavaScript. It is designed for the development of large applications and transcompiles to JavaScript.

Setting up TypeScript

To get started with TypeScript, you will need to install it on your system. You can install TypeScript using npm (the Node Package Manager), which is included with Node.js. Open a terminal and run the following command:

npm install -g typescript

This will install the TypeScript compiler (tsc) globally on your system. You can verify the installation by running the following command:

tsc -v

This will print the version of the TypeScript compiler that you have installed.

Basic Types

TypeScript supports the following basic types: number, string, boolean, and void. You can use these types to annotate variables as follows:

let num: number = 10;
let str: string = `Hello, world!`;
let flag: boolean = true;
let nothing: void = undefined;

Type Inference

TypeScript is a statically-typed language, which means that you need to specify the type of a variable when declaring it. However, TypeScript also supports type inference, which means that the compiler will infer the type of a variable based on the value assigned to it. For example:

let num = 10; // type of num is inferred as number
let str = `Hello, world!`; // type of str is inferred as string

Interfaces

Interfaces are a way to define a contract for the shape of an object. They define the structure of an object, but do not provide any implementation. You can use interfaces to define the structure of an object as follows:

interface Point {
  x: number;
  y: number;
}

let p: Point = { x: 10, y: 20 };

Classes

TypeScript supports class-based object-oriented programming. You can use the class keyword to define a class as follows:

class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
  distance(other: Point): number {
    // calculate distance between two points
  }
}

let p1 = new Point(10, 20);
let p2 = new Point(30, 40);
let dist = p1.distance(p2);

Generics:

Generics are a way to create reusable components that work with a variety of types. They allow you to define a class or function that can work with multiple types without specifying the exact type at the time of writing the code. For example:

function identity<T>(arg: T): T {
  return arg;
}

let num = identity(10); // num is of type number
let str = identity(`Hello, world!`); // str is of type string

Modules: Type

Script supports modular programming using the export and import keywords. You can use these keywords to create and use modules in your code as follows:

// math.ts
export function sum(x: number, y: number): number {
  return x + y;
}
export function product(x: number, y: number): number {
  return x * y;
}

// main.ts
import { sum, product } from `./math`;
console.log(sum(10, 20)); // 30
console.log(product(10, 20)); // 200