Skip to content
halo`s Docs

TypeScript

Getting Started

Installing the Compiler

Terminal window
npm install typescript --save-dev
npm tsc

Basic DataTypes

basic types

let isDone: boolean = false;
let age: number = 30;
let userName: string = "John";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
let notSure: any = 4;
notSure = "maybe a string instead";

enums

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

interface

interface Person {
  firstName: string;
  lastName: string;
  age?: number; // Optional property
}


function greet(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

Functions

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


let myAdd = function (x: number, y: number): number {
  return x + y;
};


let myArrowAdd = (x: number, y: number): number => x + y;


function buildName(firstName: string, lastName = "Smith") {
  return firstName + " " + lastName;
}


function buildFullName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

Classes

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}


let greeter = new Greeter("world");

Inheritance

class Animal {
  move(distance: number = 0) {
    console.log(`Animal moved ${distance} meters.`);
  }
}


class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}


const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Generics

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


let output1 = identity<string>("myString");
let output2 = identity<number>(42);

Type Assertions

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// or
let strLength2: number = (someValue as string).length;

Modules

Export

export interface StringValidator {
  isAcceptable(s: string): boolean;
}


export class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string) {
    return s.length === 5;
  }
}

Import

import { ZipCodeValidator } from "./ZipCodeValidator";


let myValidator = new ZipCodeValidator();

Namespaces

namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }


  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
      return /^[A-Za-z]+$/.test(s);
    }
  }
}


let validator = new Validation.LettersOnlyValidator();

Union and Intersection Types

Union Types

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

Intersection Types

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}


interface ArtworksData {
  artworks: { title: string }[];
}


type ArtworksResponse = ArtworksData & ErrorHandling;


const response: ArtworksResponse = {
  success: true,
  artworks: [{ title: "Mona Lisa" }],
};

Utility Types

Partial

interface User {
  id: number;
  name: string;
  age: number;
}


let partialUser: Partial<User> = {
  name: "Alice",
};

Readonly

let readonlyUser: Readonly<User> = {
  id: 1,
  name: "Bob",
  age: 25,
};


// readonlyUser.age = 26; // Error: cannot reassign a readonly property

Pick

type UserName = Pick<User, "name">;


let userName: UserName = {
  name: "Charlie",
};

Omit

type UserWithoutAge = Omit<User, "age">;


let userWithoutAge: UserWithoutAge = {
  id: 2,
  name: "Dave",
};

Decorators

Class Decorator

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}


@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

Method Decorator

function enumerable(value: boolean) {
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    descriptor.enumerable = value;
  };
}


class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }


  @enumerable(false)
  greet() {
    return "Hello, " + this.greeting;
  }
}

Async/Await

async function fetchData(url: string) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

Also read