MENU


TypeScript

Alexa's Ranking: 11,109

TypeScript builds on JavaScript by adding static type definitions. Type inference allows you to validate your code during compilation, potentially helping to catch bugs early and easing development.

Defining types is optional in TypeScript. All valid JavaScript code is also a TypeScript code.

To install the TypeScript compile:


> npm install –g typescript

To watch for changes and automatically compile TypeScript into JavaScript:


> tsc –w testing1.ts testing2.ts

This produces testing1.js and testing2.js.

Basic Types Basic Types Basic Types

Unlike unknown, variables of type any allow you to access arbitrary properties, even ones that don't exist.
let isDone: boolean = false;let decimal: number = 6;let hex: number = 0xf00d;let binary: number = 0b1010;let octal: number = 0o744;let big: bigint = 100n;let color: string = "blue";let color2: String = "blue";   // not the string primitivelet list: number[] = [1, 2, 3];let list2: Array<number> = [1, 2, 3];let tuple: [string, number] = ["hello", 10]; enum Color {
  Red=1,
  Green,
  Blue,}let c: Color = Color.Green;let c2: string = Color[2];   // Greenlet maybe: unknown = 4;if (typeof maybe === "string")
  const aString: string = maybe;let looselyTyped: any = 4;let unusable: void = undefined;    // undefined or nulllet u: undefined = undefined;let n: null = null;function error(message: string): never {
  throw new Error(message);}function fail() {// Inferred return type is never
  return error("Something failed");}function infiniteLoop(): never {  // Function returning never must not have a reachable end point
  while (true) {}}const o: object= {o:1};let strLength: number = (color as string).length;let strLength2: number = (<string>color).length;

Functions Functions Functions 


function add(
   x = 1, y:number, z?:number, ...r:string[]): number {   // x: default parameter   // y: parameter typing   // z: optional parameter   // r: rest parameters
   console.log(r.join(" "));
   if (z) return x + y + z;
   else return x + y;}let myAdd: (x: number, y: number) => number =
      function(x: number, y: number): number {
  return x + y;};class Handler {
  info: string;
  onClickGood(this: void, e: Event) {    // can't use `this` here because it's of type void!
    console.log("clicked!");
  }}let h = new Handler();document.querySelector("myElement").
               addEventListener('click',h.onClickGood);// function overloadinglet suits = ["hearts", "spades", "clubs", "diamonds"];function pickCard(
               x: { suit: string; card: number }[]): number;function pickCard(
               x: number): { suit: string; card: number };function pickCard(x: any): any {
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }}

Interfaces Interfaces Interfaces

Declaring an interface is like creating a new data type for validation.

An interface declares the types of properties, functions, or indexable objects. Note that 'const' restricts variables whereas 'readonly' restricts properties.
// declaring types of object propertiesinterface SquareConfig {
  label: string;   // mandatory
  color?: string;  // optional
  readonly width: number;  // readonly
  [propName: string]: any;   // excess prop, ie. x,y}let mySquare1: SquareConfig = {label: "s1",width: 10,x:50,y:100};   // passedfunction createSquare(config: SquareConfig):
                                     { color: string; area: number } {
  let newSquare = { color: "white", area: 100 };
  if (config.color)
    newSquare.color = config.color;
  if (config.width)
    newSquare.area = config.width * config.width;
  return newSquare;}// let mySquare2 = createSquare({ width:100});  // failedlet mySquare3 = createSquare(
                    { width:100} as SquareConfig);  // passed

// declaring function typeinterface SearchFunc {
  (source: string, subString: string): boolean;}let mySearch: SearchFunc =
                     function (source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;};

// declaring indexable typeinterface StringArray {
  [index: number]: string;}let myArray: StringArray = ["Bob", "Fred"];let myStr: string = myArray[0];let a: number[] = [1, 2, 3, 4];let ro: ReadonlyArray<number> = a;
Sometimes there can be hybrid types.
interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;}function getCounter(): Counter {
  let counter = function (start: number) {} as Counter;
  counter.interval = 123;
  counter.reset = function () {};
  return counter;}let c = getCounter();c(10);c.reset();c.interval = 5.0;
Interfaces can be extended. Extending a class inherits its types but not implementations.
interface Shape {
  color: string;}interface PenStroke {
  penWidth: number;}interface Square extends Shape, PenStroke {
  sideLength: number;}let square = {} as Square;square.color = "blue";square.sideLength = 10;square.penWidth = 5.0;

class Control {
  private state: any;}interface SelectableControl extends Control {
  select(): void;}class Button extends Control implements SelectableControl {
  select() {}}
A class can also implement an interface.
interface ClockConstructor {
  new (hour: number, minute: number): ClockInterface;}interface ClockInterface {
  tick(): void;
  currentTime: Date;}function createClock(
  ctor: ClockConstructor,
  hour: number,
  minute: number): ClockInterface {
  return new ctor(hour, minute);}class DigitalClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log("beep beep");
  }
  currentTime = new Date();}class AnalogClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log("tick tock");
  }
  currentTime = new Date();
  }let digital = createClock(DigitalClock, 12, 17);let analog = createClock(AnalogClock, 7, 32);// alternatively a class expressionconst Clock: ClockConstructor =
                      class Clock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log("beep beep");
  }
  currentTime = new Date();
  };

Union, Intersection, Liter Union, Intersection, Liter Union, Intersection, Liter al al al , , , and Enum and Enum and Enum Types Types Types

You can combine multiple types with a union (using |) or an intersection (using &).


interface Bird {
  fly(): void;
  layEggs(): void;}interface Fish {
  swim(): void;
  layEggs(): void;}// uniondeclare function getSmallPet(): Fish | Bird;let pet = getSmallPet();pet.layEggs();// pet.swim();  // error, not shared// intersectiondeclare function getDuck(): Fish & Bird;let duck = getDuck();duck.swim();

You can also 'create' a new data type by declaring string litereals:


type character = "a" | "b" | "c";function convert(c:character):0|1|2|3{
   return ["a","b","c"].indexOf(c) as 0|1|2;}convert("c");//convert("d");  // error

interface ValidationSuccess {
  isValid: true;
  reason: null;};interface ValidationFailure {
  isValid: false;
  reason: string;};// discriminating unions, ie. only one of the typestype ValidationResult =
  | ValidationSuccess
  | ValidationFailure;
An enum member is also a type.
enum ShapeKind {
  Circle,
  Square}interface Circle {
  kind: ShapeKind.Circle;
  radius: number;}

Classes Classes Classes

A 'public' member is visible outside and inside the class. A 'private' member is visible only inside the class. A 'protected' member is visible only inside the class and any class inheriting the class.An accessibility modifier (eg. public) or the 'readonly' keyword inside the parameters list of the constructor turns the parameter into a parameter property, ie. no further explicit definition is required.
class Animal {
  readonly isOrganism:boolean = true;
  public readonly isMammal:boolean;
  private name: string;
  distanceMeters: number;  // public by default
  public constructor(public type:string, isMammal:boolean){// this.type = type;                    // already defined as a parameter property
    this.isMammal = isMammal;                       // can only be defined in constructor
  }
  protected move(distanceInMeters=5) {
     this.distanceMeters = distanceInMeters;
      console.log(
               `${this.name} moved ${distanceInMeters}m.`);
  }}let Lucky:Animal = new Animal("Dog", true);
An abstract class cannot be instantiated directly. It must be instantiated through its child classes.An abstract method in an abstract class must be implemented in its derived classes.
abstract class Department {
  constructor(public name: string) {}
  printName(): void {
    console.log("Department name: " + this.name);
  }
  abstract printMeeting(): void;                         // must be implemented in derived classes}

Generics Generics Generics

Generics allow us to work on a variety of types in one go.

The generic type is inferred on-the-fly during compilation.
function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length);
  return arg;}let myIdentity: <T>(arg: T[]) => T[] = loggingIdentity;let output = myIdentity(["myString"]);
Generic types can extend an interface. Below, we declare that the argument must extend the interface Lengthwise.
interface Lengthwise {
  length: number;}function loggingIdentity2<T extends Lengthwise>(arg:T):T{
  console.log(arg.length);
   return arg;}
Besides functions, a class can be declared with a generic type too.
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;}let myGenericNumber = new GenericNumber<number>();myGenericNumber.zeroValue = 0;myGenericNumber.add = function(x, y) {
  return x + y;};
You can declare a type parameter that is constrained by another type parameter. Below, we declare that the second argument must be a key to the first argument.
function getProperty<T, K extends keyof T>(obj:T, key:K){
  return obj[key];}let x = { a: 1, b: 2, c: 3, d: 4 };getProperty(x, "a");
A prototype property can be used to infer and constrain relationships between the constructor function and the instance side of class types.
function create<T>(c: { new (): T }): T {
  return new c();}
A prototype property can be used to infer and constrain relationships between the constructor function and the instance side of class types.
class BeeKeeper {
  hasMask: boolean;}class ZooKeeper {
  nametag: string;}class Animal {
  numLegs: number;}class Bee extends Animal {
  keeper: BeeKeeper;}class Lion extends Animal {
  keeper: ZooKeeper;}function createInstance<A extends Animal>(c: new()=> A):A{
  return new c();}createInstance(Lion).keeper.nametag;createInstance(Bee).keeper.hasMask;

TypeScript is commonly used to code Angular (12.7.4).