TypeScript is a typed superset of JavaScript that introduces static typing and classes to JavaScript. It adds a compiler that validates code based on static types, interfaces, modules, and other features. Key features include declared types for variables and function parameters/returns, classes with inheritance and static properties, modules to organize code, and interfaces with structural typing. External type declarations bring these benefits to existing JavaScript libraries without changing the code.

1. LARGE SCALE JAVASCRIPT
WITH TYPESCRIPT
HH.JS - JULY 2013
Oliver Zeigermann, http://zeigermann.eu

2. TYPESCRIPT
Valid JavaScript is also valid TypeScript
Almost ECMAScript 6 with declared types
Introduces a compiler step

3. NEW CONCEPTS OF THE
LANGUAGE
Declared Types
Classes and Inheritance
Modules
Interfaces
External declarations

4. DECLARED, STATIC TYPING
var name: string = "Olli";
function doIt(p1: number, p2: boolean, p3: string): string {
if (p2) {
return p3;
} else {
return "" + p1;
}
}

5. CLASSES
class Person {
name: string; // public is the default visibility
private age: number; // either public or private
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
toString(): string {
return "Name: " + this.name;
}
}
var olli: Person = new Person("Olli", 42);
console.log(olli.name); // => "Olli"
olli.age; // => Error: Person.age' is inaccessible

6. INHERITANCE
class Customer extends Person {
private id: number;
constructor(name: string, age: number, id: number) {
super(name, age);
this.id = id;
}
toString(): string {
return super.toString() + ", id: " + this.id;
}
}
var c1: Customer = new Customer("Oma", 88, 47);
console.log(c1.toString()); // => "Name: Oma, id: 47"

7. STATIC PROPERTIES
class Customer extends Person {
private static sequence: number = 1;
public static nextNumber(): number {
return Customer.sequence++;
}
private id: number;
constructor(name: string, age: number) {
super(name, age);
this.id = Customer.nextNumber();
}
toString(): string {
return super.toString() + ", id: " + this.id;
}
}
var c1: Customer = new Customer("Oma", 88);
console.log(c1.toString());

8. MODULES
module CustomerModule {
class Person {
// ...
}
export class Customer extends Person {
// ...
}
}
// new CustomerModule.Person(...); // => undefined
new CustomerModule.Customer(...); // => cool

9. STRUCTURAL TYPING WITH INTERFACES
interface HasName {
name: string;
}
var olli: HasName = {name: 'Olli'};
olli.name; // good
olli.age; // not good, as not declared
olli = {name: 'Olli', age: 100};
olli.age; // still not good, as not declared

10. EXTERNAL DECLARATIONS
Adds tooling and type checking to existing
JavaScript libraries
Declarations disappear when compiled
TypeScript compiler comes with external
declarations for core and DOM libraries
(lib.d.ts)
Work in progress for a lot of other libraries

11. EXCERPT FROM LIB.D.TS #1
declare function parseFloat(string: string): number;
interface Function {
apply(thisArg: any, ...argArray: any[]): any;
call(thisArg: any, ...argArray: any[]): any;
bind(thisArg: any, ...argArray: any[]): Function;
prototype: any;
length: number;
}

12. EXCERPT FROM LIB.D.TS #2
interface Node extends EventTarget {
nodeType: number;
previousSibling: Node;
localName: string;
parentNode: Node;
nextSibling: Node;
// ...
}

13. TOOLS
tsc: Command Line Tool for Compiler
WebStorm / Intellij IDEA
Visual Studio (Express for Web)
Syntax highlighting for other text editors (Sublime
Text, Emacs, Vim)

14. AND THERE IS MORE...
Mapping files
External module declarations for AMD /
CommonJS
Enums
Generics
Casts
All the ES 6 goodness

15. RESOURCES
These Slides on GitHub:
Code Samples on GitHub:
https://github.com/DJCordhose/typescript-hh-js
https://github.com/DJCordhose/typescript-
sandbox

16. EXTERNAL LINKS

17. Collection of external declaration files
Syntax files for other editors
Great introductory talk by Anders Hejlsberg
TypeScript with AngularJS
AngularJS + TypeScript : Controllers, Best
Practice
Grunt Plugin for TypeScript
Version 0.9 with Generics
heise.de on TypeScript
Experience report Generics
TypeScript deep dive

18. CONCLUSION

19. TypeScript has the same semantics as JavaScript
Declared types bring you to the next level of (IDE)
tooling
Analyzing Code
Refactoring
Code completion
Syntactic sugar for classes, inheritance, and
modules is nice
All added features aligned to ECMAScript 6
Interfaces and external declarations add the
benefits of TypeScript to pure JavaScript libraries

20. QUESTIONS /
DISCUSSIONOliver Zeigermann, http://zeigermann.eu