Transpiled languages add features

• ES2015 is not supported but we can use it through transpilation
• allthough not a standard async/await is usable via babel + regenerator

Transpiled languages are free to innovate

• CoffeeScript is trying to bring a rubyesque syntax to the browser
• ClojureScript adds a lisp to the browser
• Elm is bringing sound functional reasoning and strict typing to the browser

Why not just JavaScript?

What's wrong with JavaScript?

• Loose typing
• Lack of modularity
• Verbose patterns (e.g. IIFE)

What's good about JavaScript?

• It's everywhere
• Huge amount of libraries
• Extremely flexible

TypeScript Wishlist

• Scalable HTML5 client side development
• Modular development
• Easily learnable by backend developers
• Non invasive (reuse existing libs, browser support)
• Long term vision
• Clean JS output

Strenghts of TypeScript

• Familiarity
• Support and toolchain improvements
• Near total JavaScript interop

TypeScript Features

• Superset of JavaScript
• Optionally typed
• Compiles to ES3/ES5 using "the good parts"
• No special runtime
• ES6 and ES7 now
• Supports JSX

Tooling support

• Visual Studio, Visual Studio Code and WebMatrix
• Eclipse and NetBeans
• IntelliJ Idea, WebStorm and PhpStorm
• Atom
• Sublime Text
• Emacs and Vim
• Brackets
• Plugins for grunt, gulp, maven...
• TSLint
• and more...

Getting started

$ npm install -g typescript
$ mv mycode.js mycode.ts
$ tsc --outDir out mycode.ts

May even find problems in existing JS

Primitive types

• Boolean
• Number
• String
• Symbol
• Enum
• Null
• Undefined
• Any
• Void
  • subtype of any
  • supertype of null and undefined

Advanced types

• Object
  • Classes
  • Interfaces
• Array
• Tuple
• Function
• Union types
  • var x: number | string = 0
  • a union type allows the value to be one of the input types
• Intersection types
  • var f: ((x: number) -> void) & (x: string -> void);
  • Intersection types are well suited to mimic function overloading

Classes and Interfaces

• TypeScript has a structural type system
• TypeScript focuses on the 'shape' that values have
• Interfaces have no run-time representation
• Support optional parameters
• TypeScript supports the ES6 class based OOP
• Public, protected and private members
  • All properties are public at runtime
• ​Each member is public by default
• Static members are always public
• TypeScript does not support multiple inheritance
• TypeScript supports local types

Decorators

• Decorators provide a way to add both annotations and a meta-programming syntax for classes and members
• Class decorators
• Method decorators
• Accessor decorators
• Property decorators
• Parameter decorators

Modules

• Based on the ES6 module spec
• Provide module level scoping of variables
• Simplify code re-use
• Provide encapsulation
• DRY
• Provide ease of testing
• TypeScript supports namespaces for even better code organisation
• Output formats: CommonJS, UMD, AMD

Syntax sugar

• let and const declarations
• for .. of statement
• templated strings (`2 + 2 = ${2 + 2}`)
• spread operator
  • var [x, y, ...remaining] = [1, 2, 3, 4]
•  ES6 generators (yield)
• async/await for ES6 targets (Node V4+)
• ES7 exponentiation operator (**, **=)

Future of TypeScript

• async/await support for ES3/ES5
• Allow capturing let/const in loops for ES3/ES5
• Flag unreachable code
• Recognise prototype assignments in JavaScript files
• Extract information from JSDoc in JS files
• Non nullable types
• More on the roadmap