TypeScript
coding JavaScript
without the pain
@Sander_Mak
Luminis Technologies
INTRO
@Sander_Mak: Senior Software Engineer at
Author:
Speaker:
Dutch
Java
Magazine
blog @ [Link]
AGENDA
Why TypeScript?
Language introduction / live-coding
TypeScript and Angular
Comparison with TS alternatives
Conclusion
WHAT'S WRONG WITH JAVASCRIPT?
Dynamic typing
Lack of modularity
Verbose patterns (IIFE)
WHAT'S WRONG WITH JAVASCRIPT?
Dynamic typing
Lack of modularity
Verbose patterns (IIFE)
In short:
JavaScript development scales badly
WHAT'S GOOD ABOUT JAVASCRIPT?
It's everywhere
Huge amount of libraries
Flexible
WISHLIST
Scalable HTML5 clientside development
Modular development
Easily learnable for Java developers
Non-invasive (existing libs, browser support)
Long-term vision
Clean JS output (exit strategy)
WISHLIST
Scalable HTML5 clientside development
Modular development
Easily learnable for Java developers
Non-invasive (existing libs, browser support)
Long-term vision
Clean JS output (exit strategy)
2.0 licensed
2.0 licensed
TYPESCRIPT
Superset of JavaScript
Optionally typed
Compiles to ES3/ES5
No special runtime
1.0 in April 2014, future ES6 alignment
TYPESCRIPT
Superset of JavaScript
Optionally typed
Compiles to ES3/ES5
No special runtime
1.0 in April 2014, future ES6 alignment
In short:
Lightweight productivity booster
GETTING STARTED
$ npm install -g typescript
$ mv [Link] [Link]
$ tsc [Link]
GETTING STARTED
$ npm install -g typescript
$ mv [Link] [Link]
$ tsc [Link]
May even find problems in existing JS!
OPTIONAL TYPES
Type annotations
> var a = 123
> [Link]()
JS
TypeError: undefined is
not a function
> var a: string = 123
> [Link]()
runtime
TS
Cannot convert 'number'
to 'string'.
compile-time
OPTIONAL TYPES
Type inference
Type annotations
> var a = 123
> [Link]()
JS
TypeError: undefined is
not a function
> var a: string = 123
> [Link]()
TS
Cannot convert 'number'
to 'string'.
> var a = 123
> [Link]()
!
The property 'trim' does
not exist on value of
type 'number'.
Types dissapear at runtime
OPTIONAL TYPES
Object void
any
boolean
integer
long
short
...
void boolean number
String
char
Type[]
string
type[]
OPTIONAL TYPES
Types are structural rather than nominal
TypeScript has function types:
var find: (elem: string, elems: string[]) => string =
function(elem, elems) {
..
}
OPTIONAL TYPES
Types are structural rather than nominal
TypeScript has function types:
var find: (elem: string, elems: string[]) => string =
function(elem, elems) {
..
}
DEMO: OPTIONAL TYPES
code
Code: [Link]
INTERFACES
interface MyInterface {
// Call signature
(param: number): string
member: number
optionalMember?: number
}
myMethod(param: string): void
var instance: MyInterface = ...
instance(1)
INTERFACES
Use them to describe data returned in REST calls
$.getJSON('user/123').then((user: User) => {
showProfile([Link])
}
INTERFACES
TS interfaces are open-ended:
interface JQuery {
appendTo(..): ..
..
}
[Link]
interface JQuery {
draggable(..): ..
..
}
[Link]
OPTIONAL TYPES: ENUMS
enum Language { TypeScript, Java, JavaScript }
!
var lang = [Link]
var ts = Language[0]
ts === "TypeScript"
enum Language { TypeScript = 1, Java, JavaScript }
!
var ts = Language[1]
GOING ALL THE WAY
Force explicit typing with noImplicitAny
var ambiguousType;
!
ambiguousType = 1
ambiguousType = "text"
[Link]
$ tsc --noImplicitAny [Link]
GOING ALL THE WAY
Force explicit typing with noImplicitAny
var ambiguousType;
!
ambiguousType = 1
ambiguousType = "text"
[Link]
$ tsc --noImplicitAny [Link]
error TS7005: Variable 'ambiguousType' implicitly
has an 'any' type.
TYPESCRIPT CLASSES
Can implement interfaces
Inheritance
Instance methods/members
Static methods/members
Single constructor
Default/optional parameters
ES6 class syntax
similar
different
DEMO: TYPESCRIPT CLASSES
code
Code: [Link]
ARROW FUNCTIONS
Implicit return
No braces for single expression
Part of ES6
ARROW FUNCTIONS
Implicit return
No braces for single expression
Part of ES6
function(arg1) {
return [Link]();
}
ARROW FUNCTIONS
Implicit return
No braces for single expression
Part of ES6
function(arg1) {
return [Link]();
}
(arg1) => [Link]();
ARROW FUNCTIONS
Implicit return
No braces for single expression
Part of ES6
function(arg1) {
return [Link]();
}
(arg1) => [Link]();
Lexically-scoped this (no more 'var that = this')
DEMO: ARROW FUNCTIONS
code
Code: [Link]
TYPE DEFINITIONS
How to integrate
existing JS code?
Ambient declarations
Any-type :(
Type definitions
[Link]
Separate compilation:
tsc --declaration [Link]
TYPE DEFINITIONS
How to integrate
existing JS code?
[Link]
Community provided .[Link]
files for popular JS libs
Ambient declarations
Any-type :(
Type definitions
[Link]
Separate compilation:
tsc --declaration [Link]
INTERNAL MODULES
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
[Link](privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: [Link] = new [Link]();
[Link]('testing');
INTERNAL MODULES
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
[Link](privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: [Link] = new [Link]();
[Link]('testing');
INTERNAL MODULES
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
[Link](privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: [Link] = new [Link]();
[Link]('testing');
INTERNAL MODULES
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
[Link](privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: [Link] = new [Link]();
[Link]('testing');
INTERNAL MODULES
TS internal modules are open-ended:
!
module Webshop {
export class Cart { .. }
}
[Link]
/// <reference path="[Link]" />
module Webshop {
export class Catalog { .. }
}
[Link]
INTERNAL MODULES
TS internal modules are open-ended:
!
module Webshop {
export class Cart { .. }
}
[Link]
Can be hierarchical:
module [Link] {
...
}
/// <reference path="[Link]" />
module Webshop {
export class Catalog { .. }
}
[Link]
INTERNAL MODULES
TS internal modules are open-ended:
!
module Webshop {
export class Cart { .. }
}
[Link]
Can be hierarchical:
module [Link] {
...
}
/// <reference path="[Link]" />
module Webshop {
export class Catalog { .. }
}
[Link]
Combine modules:
$ tsc --out [Link] [Link]
DEMO: PUTTING IT ALL TOGETHER
code
Code: [Link]
EXTERNAL MODULES
CommonJS
Asynchronous
Module
Definitions
$ tsc --module common [Link]
$ tsc --module amd [Link]
Combine with module loader
EXTERNAL MODULES
'Standards-based', use existing external modules
Automatic dependency management
Lazy loading
AMD verbose without TypeScript
Currently not ES6-compatible
DEMO
+
DEMO: TYPESCRIPT AND ANGULAR
code
Code: [Link]
BUILDING TYPESCRIPT
$ tsc -watch [Link]
grunt-typescript
grunt-ts
gulp-type
gulp-tsc
(incremental)
TOOLING
IntelliJ IDEA
WebStorm
plugin
TYPESCRIPT vs ES6 HARMONY
Complete language + runtime overhaul
More features: generators, comprehensions,
object literals
Will take years before widely deployed
No typing (possible ES7)
TYPESCRIPT vs COFFEESCRIPT
Also a compile-to-JS language
More syntactic sugar, still dynamically typed
JS is not valid CoffeeScript
No spec, definitely no Anders Hejlsberg...
Future: CS doesn't track ECMAScript 6
!
TYPESCRIPT vs DART
Dart VM + stdlib (also compile-to-JS)
Optionally typed
Completely different syntax & semantics than JS
JS interop through dart:js library
ECMA Dart spec
TYPESCRIPT vs CLOSURE COMPILER
Google Closure Compiler
Pure JS
Types in JsDoc comments
Less expressive
Focus on optimization, dead-code removal
WHO USES TYPESCRIPT?
(duh)
CONCLUSION
Internal modules
External modules
Generics
Classes/Interfaces
Type defs
Type defs
Some typing
More typing
-noImplicitAny
CONCLUSION
TypeScript allows for gradual adoption
Internal modules
External modules
Generics
Classes/Interfaces
Type defs
Type defs
Some typing
More typing
-noImplicitAny
CONCLUSION
Some downsides:
Still need to know some JS quirks
Current compiler slowish (faster one in the works)
External module syntax not ES6-compatible (yet)
Non-MS tooling lagging a bit
CONCLUSION
High value, low cost improvement over JavaScript
Safer and more modular
Solid path to ES6
MORE TALKS
TypeScript:
Wednesday, 11:30 AM, same room
Akka & Event-sourcing
Wednesday, 8:30 AM, same room
!
@Sander_Mak
Luminis Technologies
RESOURCES
Code: [Link]
!
Learn: [Link]/Handbook
@Sander_Mak
Luminis Technologies
