TypeScript: Beginner's Guide

TypeScript is a popular programming language that offers static type checking for JavaScript code. It was developed by Microsoft and released in 2012. Since then, it has gained significant popularity among developers, especially those working on large-scale projects.

History of TypeScript

In 2011, Microsoft developer Anders Hejlsberg started working on TypeScript, with the aim of providing a better development experience for large-scale JavaScript applications. Hejlsberg is also known for developing C#, Delphi, and Turbo Pascal, among others. TypeScript was designed to be a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code.

Why Use TypeScript?

There are several reasons why TypeScript has become popular among developers. Firstly, it offers type checking at compile time, which can catch errors early on in the development process. This can save time and reduce bugs in the final product. Additionally, TypeScript provides better tooling support and code completion, which can improve developer productivity. Lastly, TypeScript is compatible with existing JavaScript libraries, which means that developers can gradually introduce TypeScript into their projects.

Key Features of TypeScript

Here are some of the key features of TypeScript that make it popular among developers:

Static Typing: TypeScript supports static typing, which means that variables, function parameters, and return types can be explicitly typed. This can catch errors at compile time and improve code quality.
Object-Oriented Programming: TypeScript supports object-oriented programming (OOP) concepts such as classes, interfaces, and inheritance. This can make code more modular and easier to maintain. This also makes it more amenable for developers who are already familiar with OO languages like C++, Java, etc.
Type Inference: TypeScript can infer types based on context, which means that developers do not always have to explicitly type variables. This can reduce boilerplate code and improve readability.
Decorators: TypeScript supports decorators, which are a way to modify classes and properties at runtime. Decorators can be used for logging, validation, and other cross-cutting concerns.

Before going into examples of each of the above features let's first setup our TypeScript development environment

Setup TypeScript Development Environment

Note: The following steps are for setting up a pure TypeScript environment to demonstrate compiling .ts files. Typically when using frameworks like React, NextJS, NestJs, Express, NodeJS, you create projects using their starters and they will automatically setup a typescript environment, either by default or by specifying a flag. For example see the React's starter for creating a project with typescript.

Install Node.js and npm (Node Package Manager) on your computer. You can download the latest version of Node.js from the official website: https://nodejs.org/en/download/
Install TypeScript globally using npm by running the following command in your terminal or command prompt:

npm install -g typescript

Create a new folder for your TypeScript project
Open Visual Studio Code and navigate to your project folder using the File menu. Go here if you don't already have Visual Studio Code
Create a new file with a .ts extension, which is the file extension for TypeScript files.
Add some TypeScript code to your file. (See below for some examples)
Open the terminal in Visual Studio Code using the View menu and selecting New Terminal. Or using the Terminal menu and selecting New Terminal
Compile your TypeScript code into JavaScript code using the following command:

tsc filename.ts

Replace filename with the name of your TypeScript file.

The TypeScript compiler will generate a JavaScript file with the same name as your TypeScript file, but with a .js extension. You can now run this JavaScript file using Node.js.

node filename.js

Now that your dev environment is up and running, running some of the examples for yourself and see if you can introduce a breaking change that can compile successfully (without using any)

Examples of Key Features of TypeScript

Static Typing

let age: number = 30;
let name: string = "John Doe";
let isMale: boolean = true;
let ageWithError: number = "thirty"; // Type error: Type 'string' is not assignable to type 'number'

The above code will fail compilation due to the ageWithError variable. If you're using an IDE like Visual Studio Code, this syntax error would highlighted immediately without having to compile your code.

Object-Oriented Programming

If you're coming from traditional OOP languages like JAVA or C++, then typescript will seem familiar to you since in introduces similar constructs to JavaScript. See the following example:

interface Shape {
  getArea(): number;
}

class Square implements Shape {
  constructor(private sideLength: number) {}

  getArea() {
    return this.sideLength ** 2;
  }
}

class Triangle implements Shape {
  constructor(private base: number, private height: number) {}

  // OOP error: Triangle is not implementing the getArea method from the Shape interface
}

const square = new Square(5);
const triangle = new Triangle(10, 20); // Error: Class 'Triangle' incorrectly implements interface 'Shape'.

The above code will return compile errors because Triangle did not properly implemented the Shape interface.

TypeScript also supports typical OOP features such as polymorphism and behaves similarly to typical OOP languages

abstract class Animal {
    public abstract makeSound()
}
  
class Dog extends Animal {
    public makeSound() {
        console.log("Bark");
    }
}

class Cat extends Animal {
    public makeSound() {
        console.log("Meaow");
    }  
}
  
const animals: Animal[] = new Array<Animal>(5)
for(let i=0; i<animals.length; ++i){
    //Some random logic to determin which type of animal to create
    if (i%2 === 0){
        animals[i] = new Dog()
    } else {
        animals[i] = new Cat()
    }
}

animals.forEach(animal => {
    animal.makeSound()
})

The above code will print out: