A Comprehensive Guide to TypeScript for Beginners

TypeScript is a typed superset of JavaScript that adds types to JavaScript. It is becoming increasingly popular due to its ability to catch errors at compile time and its ability to scale to larger codebases. In this blog, we will cover the fundamentals of TypeScript, including classes, objects, and type casting, and provide a step-by-step guide for beginners to get started with TypeScript.

Classes in TypeScript
Classes in TypeScript allow us to define the types of data that each piece of data should be in a class. We can create a class and define its properties and methods like this:

class Person {
  name: string;
  isCool: boolean;
  pets: number;

  constructor(n: string, c: boolean, p: number) {
    this.name = n;
    this.isCool = c;
    this.pets = p;
  }

  sayHello() {
    return `Hi, my name is \${this.name} and I have \${this.pets} pets`;
  }
}

const person1 = new Person('Danny', false, 1);
console.log(person1.sayHello()); // Hi, my name is Danny and I have 1 pets
We can also make our code more concise by constructing class properties in the constructor, like this:

class Person {
  constructor(
    readonly name: string,
    private isCool: boolean,
    protected email: string,
    public pets: number
  ) {}

  sayMyName() {
    console.log(`You're not Heisenberg, you're \${this.name}`);
  }
}

const person1 = new Person('Danny', false, '[e-mail]', 1);
console.log(person1.name); // Danny

In the above code, the properties are automatically assigned in the constructor, saving us from having to write them all out. Note that if we omit the access modifier, by default the property will be public.

We can also extend classes in TypeScript, just like in regular JavaScript:

class Programmer extends Person {
  programmingLanguages: string[];

  constructor(
    name: string,
    isCool: boolean,
    email: string,
    pets: number,
    pL: string[]
  ) {
    // The super call must supply all parameters for base (Person) class, as the constructor is not inherited.
    super(name, isCool, email, pets);
    this.programmingLanguages = pL;
  }
}

Objects in TypeScript
Objects in TypeScript must have all the correct properties and value types. We can define the signature of an object using an interface, which is useful if we need to check that multiple objects have the same specific properties and value types. Here's an example:

interface Person {
  name: string;
  location: string;
  isProgrammer: boolean;
}

let person1: Person = {
  name: 'Danny',
  location: 'UK',
  isProgrammer: true,
};

let person2: Person = {
  name: 'Sarah',
  location: 'Germany',
  isProgrammer: false,
};
We can also declare function properties with function signatures, like this:

interface Speech {
  sayHi(name: string): string;
  sayBye: (name: string) => string;
}

let sayStuff: Speech = {
  sayHi: function (name: string) {
    return `Hi \${name}`;
  },
  sayBye: (name: string) => `Bye \${name}`,
};

console.log(sayStuff.sayHi('Heisenberg')); // Hi Heisenberg
console.log(sayStuff.sayBye('Heisenberg')); // Bye Heisenberg

Type Casting
TypeScript has an Event object built in. If we add a submit event listener to our form, TypeScript will give us an error if we call any methods that aren't part of the Event object. We can use type casting to make sure TypeScript knows the correct type of the object. Here's an example:

const form = document.getElementById('signup-form') as HTMLFormElement;

form.addEventListener('submit', (e: Event) => {
  e.preventDefault(); // prevents the page from refreshing
  console.log(e.target); // No error
});

Running TypeScript from the Editor
TypeScript can be run on any JavaScript file. If you're a VS Code user, you can enable TypeScript's checking by adding this to the very top of your JavaScript file:

// @ts-check

This will give you squiggly red errors in your editor that highlight your mistakes. You should also see a cross in the bottom left-hand corner with a two by it. Clicking on this will reveal the problems that have been spotted.