TypeScript

Deep Dive

GET THE DEEP DIVE BOOK!

Press Space neo


Originally by BAS (Basarat Ali Syed) / @basarat

What does typescript provide?

  • Strong Typing
  • Better Syntax
Strong Typing --- - Interfaces - Inline typing (type declarations) - Ambients - Variable - Functions - Classes - Modules

Interfaces

What do you want from me?

Interfaces

interface fooInterface{ // constructor new (fooParam1:number,fooParam2?):number; // call signature callable without new (fooParam1:any):string; // indexable [index:string]:number; }

Interfaces

interface fooInterface{ // functions with overloads fooFunc1(fooParam1:bool):any; fooFunc2(...fooParam1:number[]):any; fooFunc3:(fooParam1:bool)=>any; // variables fooVar1:number; fooVar2?:Array; // array fooArr1:{ [index:string]:number; }; fooArr2:number[]; }

Open Ended

interface foo{ x:number; } interface foo{ y:number; } var bar:foo = { x:123, y:123 }

Pattern

Modelling Statics

Sample Class

Suppose you have javscript class with equivalent behaviour: class Test{ static foo = 123; bar = 456; }

Simple solution

What the compiler will generate with --declaration flag: declare class Test { static foo: number; public bar: number; } Not open ended!

Manual solution

Remember declaration spaces? Add one to to each space: // Non static members interface Test{ bar:number; } // Static members and constructors go here: interface TestStatic { new():Test; foo:number; } declare var Test:TestStatic; And its open ended.

Finally

One Final Note

This presentation uses TypeScript

This presentation uses TypeScript with Javascript (RequireJS + AngularJS) and encourage you to look at the source on github.

THANK YOU

BAS

(Basarat Ali Syed)

bas AT basarat.com

basarat.com
@basarat
Fork me on GitHub