• What is the type of "selector"?
  • What is the return type of this function?


  • What will happen if "selector" is a number?




Aren't we already using Types?

Angular


React


HTMLInputElement on MDN


JQuery


TypeScript to the rescue



Basic Types

var x: string;
var y: number;
var z: boolean;
var a: string[];
var f: () => string;
var foo: any;

Inline declaration

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

Interfaces

interface IThing {
  a: number;
  b: string;
}

function process(x: IThing){  return x.a.length;
}  

Tuples

var tuple: [number, string] = [1, "bob"];
var secondElement = tuple[1];  // secondElement now has type 'string'

Aliases

type PrimitiveArray = Array<string|number|boolean>;
type MyNumber = number;
type NgScope = ng.IScope;
type Callback = () => void;

Enums

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

Wait, do I have to rewrite my code?




  • Every js is typescript as well, so just rename from js to ts
  • Add build step: grunt/gulp
  • You are good to go.

IDE

  • Find type errors in your IDE (dev time)
  • Refactoring is super easy
  • IntelliSense




Questions?




Questions:string[];

Made with Slides.com