Why you should use Typescript
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
Functions
- Functions are the building blocks of any application in JavaScript
- Named functions
- Anonymous functions
- All function parameters have to be provided
- There are optional, default and rest parameters
- TypeScript supports function overloading
- TypeScript supports lambdas
- Lambdas solve problems with the correct `this` bindings
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