What is TypeScript?

What is TypeScript?

• ES6+ with optional typings
• Compiles to plain JavaScript
• Open source language by Microsoft
• Very good integration in VS Code

What is TypeScript?

• ES6+ with optional typings
• Compiles to plain JavaScript
• Open source language by Microsoft
• Very good integration in VS Code & others

Static typed languages

Static typed languages

• Java

  String name = 'Tamino';

• C#

  string name = 'Tamino';

• Objective-C

  NSString name = 'Tamino';

Optionally typed

Optionally typed

• with type

  const name: string = 'Tamino';

• without type

  const name = 'Tamino';

• implies*

  const name: any = 'Tamino';

Optionally typed

• with type

  const name: string = 'Tamino';

• without type

  const name = 'Tamino';

• implies

  const name: string = 'Tamino';

Why TypeScript?

Productivity

Reliability

Demo

Basic Types

• number

  const luckyNumber: number = 8;

• boolean

  const isActive: boolean = false;

• string

  const name: string = 'Tamino';

Multiple Types

• let param: string | undefined;

• param = 'foo';

• param = undefined;

• param = 8; // 💩

Combined Types

• type optionalString = string | undefined;
  let param: optionalString;
  let param?: string;

• type vote = 'yay' | 'nay';

Array Declarations

• normal

  const shifts: Shift[];

• alternate

  const shifts: Array<Shift>;

• Multi Dimensional

  const shiftLists: Shift[][];

Dictionaries

• const phoneBook: { [name: string]: string };

• phoneBook['Tamino'] = '01577 1234567';

• phoneBook['Tamino'] = 15771234567; // 💩

• phoneBook[0] = '01577 1234567'; // 💩

Dictionaries

• const phoneBook: {
    emergency: string;
    [name: string]: string;
  };

• class Foo {
    [key: string]: any;
  }

Functions

• const callback: ( shifts: Shift[]) => void;

• class Foo {
    bar(params: string[]): string { ... }
  }

Function overloading

• class Foo {
    bar(params: string[]): string { ... }
  }

Function overloading

• type nuStr = number | str;
  class Foo {
    bar(params: nuStr[]): nuStr { ... }
  }

Function overloading

• class Foo {
    bar(params: string[]): string
    bar(params: number[]): number
    { ... }
  }

Classes

• class Foo {
    public static readonly TABLE_NAME = 1;
    private static _name: string;
  }

Classes

• class Foo {
    public static readonly TABLE_NAME;
    private static _name: string;
    static get TABLE_NAME {
      return this._name.toUpperCase();
    }
  }

Interfaces

• interface IEmailable {
    name: string;
    email: string;
  }

• interface Employment extends IEmailable

• class Employment implements IEmailable

• interface IEmailable {
    name: string;
    email: string;
  }

• interface Employment extends IEmailable

• class Employment implements IEmailable

• class A extends B implements D, E

Enums

• enum Style {
    NONE = 0,
    BOLD = 1,
    ITALIC = 2,
    UNDERLINE = 4,
    EMPHASIS = Style.BOLD | Style.ITALIC,
    HYPERLINK = Style.BOLD | Style.UNDERLINE,
  }

Enums

• enum ShiftplanStatus {
    New,
    Published,
  }

Get Enum Values

• const style: number = Style.ITALIC; // 2

• let status: string;
  status = Status[Status.New]; // 'New'

Modules

• module Shyftplan {
    export class Employment;
    ...
  }

Generics

• interface Array<T> {
    ...
    map<U>(cb: (value: T) => U): U[];
    ...
  }

Whats next?

• Playground
• Slides
• 
  

  npm install typescript -g