TypeScript
Type System

Key Takeaways

  • The type system in TypeScript is designed to be optional
  • TypeScript does not block JavaScript emit in the presence of Type Errors
  • TypeScript has a structural type system

Basic Annotations

TypeScript is using the :TypeAnnotation syntax

var num: number = 123;

function identity(num: number): number {
    return num; 
}
const identity = (num: number) => number {
    return num;
}

For closures, the syntax changes a bit

Primitive Types

The JavaScript primitive types are string, number, boolean

let num: number;

num = 123;
num = 123.456;
num = '123'; // Error
let str: string;

str = '123';
str = 123; // Error
let isDone: boolean = false;

isDone = true;
isDone = false;
isDone = 'false'; // Error

Arrays

Dedicated type syntax, similar to other languages

let boolArray: boolean[];

boolArray = [true, false];
console.log(boolArray[0]); // true
console.log(boolArray.length); // 2

boolArray[1] = true;
boolArray = [false, false];

boolArray[0] = 'false'; // Error!
boolArray = 'false'; // Error!
boolArray = [true, 'false']; // Error!

Alternative syntax, using generics

const stringArr: Array<string> = ['foo', 'bar'];

Enums

They are a way to group together related constants

enum Color {Red, Green, Blue}

let c: Color = Color.Green;

It's possible to assign explicit values

enum Color { Red = 2, Green, Blue }

let c: Color = Color.Green;

Strings also work for values

enum Color { Red = 'red', Green = 'green', Blue = 'blue' }

let c: Color = Color.Green;

Interfaces

They provide a way to compose multiple type annotations into a single named annotation.

interface User {
    firstName: string;
    lastName: string;
}

let user: User = {
    firstName: 'Max',
    lastName: 'Mustermann'
};
interface AccountModel {
    isCreditCard(): boolean;
    isCurrentAccount = () => boolean;
}

Declaring methods in an interface

Extending Interfaces

Interfaces can extend other interfaces

interface Admin extends User, SpecialPrivileges {
    accessLevel: number;
}

Classes can extend interfaces

class Customer implements User {
    // ...
}

The definition of a class creates a type in itself

const user: Customer = new Customer();

Inline Type Annotation

Annotate anything you want inline using :{ }

let name: {
    first: string;
    second: string;
};
name = {
    first: 'John',
    second: 'Doe'
};

name = { // Error : `second` is missing
    first: 'John'
};

Special Types

These are any, null, undefined, void.

let power: any;

// Takes any and all types
power = '123';
power = 123;
Any
void
function log(message): void {
    console.log(message);
}

It's used to mark that a function doesn't return anything

Special Types

The null and undefined literals can be assigned to anything.

let num: number;
let str: string;

// These literals can be assigned to anything
num = null;
str = undefined;
null and undefined

In strict mode this won't work.

Generics

Useful for:

  • algorithms that independent from the type
  • enforce a constraint between various variables
interface Array<T> {
    reverse(): T[];
    // ...
}

function getUsers(): Array<User> {
    // ...
}

Union Type

Allows a property to be one of multiple types

function formatAmount(date: string|number) { 
    if (typeof date === 'string') {
        // handle strings
    } else {
        // handle numbers
    }
}

Literal union

Text

type AccountType = 'giro' | 'bank' | 'card';

Type Alias

You can give a type alias to literally any type annotation

type StringOrNunber = string | number;
type Text = string | { text: string };
type Callback = (data: string) => void;

Typescript Type System

By kenjiru

Made with Slides.com

Typescript Type System

A short description of the TypeScript type system

  • 419

More from kenjiru