magic types

let's dive into TS type system

Michał Michalczuk

michalczukm.xyz

Michał Michalczuk

Senior JavaScript Developer

Ciklum / Stibo Systems

 

 

IT trainer

infoShare Academy

                     magic types

let's dive into TS type system

Michał Michalczuk

michalczukm.xyz

TypeScript

  • JavaScript that scales
     
  • Superset of JavaScript that compiles to plain JavaScript
     
  • JavaScript code is legal TypeScript
     
  • Optional static typed language

 

TypeScript

ES6

ES5

TypeScript type system

  • Optional static typed
     
  • Strural type system
     
  • As strict as you want to
     
  • Rich

Type systems

What problems they solve?

Imagine this code ...

I know 

The "f... the logic" version

function getValue() {
    switch(Math.random() % 3) {
        case 0:
            return 'foo';
        case 1:
            return 5;
        case 2: 
            return { value: '5' };
        default:
            throw new Error('Ups');
    }
}

const result = getValue() + 1;

I know 

The "f... the logic" version

function getValue(): any {
    switch(Math.random() % 3) {
        case 0:
            return 'foo';
        case 1:
            return 5;
        case 2: 
            return { value: '5' };
        default:
            throw new Error('Ups');
    }
}

const result = getValue() as number + 1;

You get the point.

How type systems divide?

Type systems

Lang Types check Run time safety
JavaScript Dynamic Weak
TypeScript Static Weak
C# / Java Static Strong

In TypeScript we have no guarantee for types during runtime

What about casting?

type Order = {
    clientName: string
};

const orderWorks = {} as Order;

const orderAlsoWorks = <Order>{};

Sorry, its not casting

Its Type Assercion

You tell compiler:

I'm sure of the type, hold my bear

What structural type system means?

Structural

Nominal


type Foo = {
    foo: string;
    handleStuff: () => void;
}

type Bar = {
    foo: string;
}

const foo: Foo = { 
    foo: 'foo', 
    handleStuff: () => ({}) 
};

// works, struc. of `Bar` is subset
const bar: Bar = foo;

// won't compile. 
// `handleStuff` is missing
foo = bar;
class Foo {
    public string Foo { get; set; }
}

class Bar {
    public string Foo { get; set; }
}


Foo foo = new Foo { Foo = "foo" };

// won't compile.
// Its different type
Bar bar = foo;

Interesting example

function handle( item: {value: string} ) {
    // do stuff
}

handle({ 
    value: 'some value' 
});


const item = {
    name: 'Item name',
    value: 'some value',
};

handle(item);

Works

But

function handle( item: {value: string} ) {
    // do stuff
}

// [error] Object literal may only specify known properties, 
// and 'name' does not exist 
// in type '{ value: string; }'.
handle({
    name: 'Item name',
    value: 'some value',
});

Error

Interface

vs 

Class

vs

Type alias

When to use them?

Class when need to
  • instantiate
  • handle state
  • have implementation
 
Interface/Type when need to
  • describe contract

  • do anything else

Nullable and special types

Index types

Intersect and union types

Generics

Discriminated union types

Polymorphic this

Conditional types

Questions time

Michał Michalczuk

michalczukm.xyz

Thank you!

michalczukm

TypeScript magic types

By Michał Michalczuk

TypeScript magic types

Angular 3city meetup, 09.05.2018 Gdańsk

  • 1,996