Learn TypeScript page

Before you begin

Click here to join the
Bitovi Community Discord

Join the Bitovi Community Discord to get help on Bitovi Academy courses or other Angular, React, CanJS and JavaScript problems.

Please ask questions related to TypeScript in the TypeScript chat room.

If you find bugs in this training or have suggestions, create an issue or email contact@bitovi.com.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Angular and many other frameworks use TypeScript to take advantage of its typechecking magic. While TypeScript may mean a bit of a learning curve for new developers, this guide covers the basics of TypeScript and work through examples to learn to harness the power of TypeScript.

Outline

• Why TypeScript - learn what TypeScript is and how to compile it.
• IDE Support - configure TypeScript and learn about different IDEs that help support TypeScript development.
• Types - understand basic types and how to enforce them.

  let isCarnivore: boolean;
  

• Functions - how to annotate functions parameters and return values, different parameter types available, and how to bind this.

  function add(x: number, y: number): number {
    return x + y;
  }
  

• Classes - using classes and inheritance in TypeScript, explaining the constructor method, and using public, private, protected, and readonly modifiers.

  class Human {
    constructor(public firstName: string, public lastName: string) {}
  
    getFullName(): string {
      return `${this.firstName} ${this.lastName}`;
    }
  }
  

• Interfaces - writing Interfaces, setting optional properties, and the power of using interfaces in classes and functions.

  interface Dinosaur {
    name: string;
    breed: string;
    height: number;
    location: string;
  }
  

• Generics - explaining what generics are, why they are useful, and how to create a linked list using generics in TypeScript.

  class GenericCollection<T> {
    private list: T[];
    pushItem(thing:T) {
      this.list.push(thing);
    }
  }
  

Next steps

✏️ Head over to the first lesson and get your environment setup.