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