TypeScript

The future today! and more...

A little about me

• I am a techlead in the eCommerce team at Wix.com.
   
• Been working with TypeScript from version 0.7 (2 years ago)
   
• I love games!
   
• Don't follow me at @gilamran

What is TypeScript?

Superset?

              Type System

Java Types

Crazy OOP diagrams

Aren't we already using Types?

Angular docs

React docs

HTMLInputElement on MDN

TypeScript

Basic Types

Basic Types

var x: string;
var y: number;
var z: boolean;
var foo: any;
var bar; // Same as "any"

Arrays

var a: any[];
var b: string[];
var p: Product[];

Functions as types

var func : (name:string) => number;

questions : string[];

Interfaces

Structural types

function process(x: {a:string; b:number}){
   return x.a.length;
}

Structural vs Interface

interface IProduct {
  name  : string;
  price : number;
}

function hasName(product: IProduct){
  return product.name.length > 0;
}

var isNamed = hasName({name:'iPhone', price:1000});

playground

Optional fields

interface IPerson {
  age      : number;
  name     : string;
  address? : string;  // <-- optional field
}

function getName(p: IPerson){
  return p.name;
}

var name = getName({age:10, name:'Me'});

playground

Function fields

interface IPerson {
  age     : number;
  name    : string;
  address : string;
  walk(distance:number): number;  // <-- a Function
}

Function overloads

interface IPerson {
  age     : number;
  name    : string;
  address : string;
  walk(distance:number): number;
  walk(destination:string): number;
  walk(location:{x:number, y:number}): number;
}

As a Function (Hybrid)

interface IPerson {
  age     : number;
  name    : string;
  address : string;
  walk(distance:number): number;
  (): string;  // <-- a Function
}

questions : IQuestion[];

Type inference

Where inference takes over?

var x = 3; // x is a number

backward inference

interface IHuman {
  age: number;
  walk(distance:number):void;
}

var man : IHuman = {
  age : 120,
  walk: function(distance) { 
    console.log(distance);  // distance inferred to be a number
  }
}

backward inference #2

window.onmousedown = function(mouseEvent) { 
  // mouseEvent inferred as MouseEvent
  console.log(mouseEvent.button); 
};

Inference can cause errors

var x = 3; // x is a number
x = "45";  // compiler error

any

var x; // x is any forever
x = '45';  // x is still any

function process(x): {  // x is any
  return x+x*3;         // return type is any
}

process(42); // this does not change the type of x

function getQuestions() : IQuestion[] {}

Type Guards

Type Guards

var x: any;
if (typeof x === 'string') {
   console.log(x.subtr(1)); // Error
}

// x is still any here
x.unknown(); // OK

instanceof

class Animal { name:string }
class Cat extends Animal { meow() { } }

var pet: Animal = new Cat();

if (pet instanceof Cat) {
   pet.meow(); // OK
} else {
   pet.meow(); // Error
}

User defined type guards

interface Animal {name: string; }
interface Cat extends Animal { meow(); }

function isCat(a: Animal): a is Cat {
  return a.name === 'kitty';
}

var x: Animal;

if(isCat(x)) {
  x.meow(); // OK, x is Cat in this block
}

Ambient Types

Example for ambient type

declare var angular : any;

lib.d.ts a gift from TypeScript

• 17K lines of ambient declarations

  • eval, parseInt, encodeURI

  • Math, Date, RegExp

  • Full DOM declarations

  • And many more...

DefinitelyTyped a gift from the comunity

So what?!

Refactor

List parameters

Find occurrences

Go to definition

Code completion

inline errors