magic types

let's dive into TS type system

Michał Michalczuk

michalczukm.xyz

repository with examples

Michał Michalczuk

Senior JavaScript Developer

Ciklum / Stibo Systems

 

 

IT trainer

infoShare Academy

michalczukm.xyz

                     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

http://blog.coldflake.com/posts/choosing-the-Type-of-your-Types/

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

1-class-interface-type.ts

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

2-nullable-and-special-types.ts

Index types

3-index-types.ts

Intersect and union types

4-intersect-union-types.ts

Generics

5-generics.ts

Discriminated union types

6-discriminated-union-types.ts

Polymorphic this

7-polymirphic-this.ts

Conditional types

8-conditional-types.ts

michalczukm.xyz

Questions time

Michał Michalczuk

michalczukm.xyz

Thank you!

michalczukm

Made with Slides.com