ReactJS + TypeScript

A match made in heaven

  • Type What?

JavaScript

let foo = 123;

TypeScript

let foo = 123;

JavaScript

foo = 123;

TypeScript

foo = 123;

Error : Cannot find name 'foo'

Linter on steroids

Linter on steroids

With syntax extensions

Type Info

function iPityTheFoo(foo) {
  console.log(foo.bar + 123);
}

iPityTheFoo({foo:123});

Type Info

function iPityTheFoo(foo: { bar: number }) {
  console.log(foo.bar + 123);
}

// Error property `bar` missing
iPityTheFoo({ foo: 123 }); 

Type Info

function iPityTheFoo(foo: { bar: number }) {
  console.log(foo.bar + 123);
}

// Error property `bar` not number
iPityTheFoo({ bar: '123' }); 

Type Info

function iPityTheFoo(foo: { bar: number }) {
  console.log(foo.bar + 123);
}

// Okay
iPityTheFoo({ bar: 123 }); 

Language Services

More than just a

linter + transpiler

Learn More

Project Setup

  • Webpack Config
  • tsconfig.json
  • NPM Config

DEMO

Sample Projects

alm.tools​ 

Thank You

Made with Slides.com