TypeScript Introduction

Hans Höchtl
Technical Director @ Onedrop
PHP, Java, Ruby Developer
TYPO3 Solr, Neos

Back in time to the beginning of

JavaScript
• Developed in 10 days back in 1995
• Target: Easy script interaction for hobby
programmers in the browser, who can’t write
Java
• 1996 handed over to ECMA for standardization
• ECMAScript 5 (spec. 1999) supported by all
browsers (>=IE9)

JavaScript - What happened?
• CoffeeScript
• Modularization (requireJS, AMD, etc.)
• jQuery
• NodeJS

JavaScript - In the enterprise?
• Not typesafe
• No objects/classes
• Hard to test
• Bad Async handling

TypeScript to the rescue
• Released 2012 by Microsoft
• Developed by Anders Hejlsberg (C#, Delphi)
• Compiles to JavaScript (configurable version)
• Full OOP
• Type-safe
• JavaScript compatible

ES5 
JavaScript 1.5
ES2015 (ES6) TypeScript

Buzzword bingo
Types
var / let / const
Inheritance
Promises
Generics
Fat arrow
Interfaces
Decorators
public / private
Moduls
Class

Typing
var foo: string = 'bar';
var bar: any = ['lorem', 2];
function (p: Person) {
console.log(p.lastName);
}
function getAddress(): Address {
return this.address;
}
function getCountAndObject(): [number, any] {
return [this.addresses.length, this.addresses];
}

Types
// Primitives
var bar: any = ['lorem', 2];
// Arrays
var listOfSomething: number[] = [1,2,3];
var listOfSomething: Array<number> = [1,2,3];
// Tuples
var tuple: [string, number] = ['Hello', 5];
// Enum
enum Color {Red, Green, Blue};
var c: Color = Color.Green;
// Casting
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// Literals
type Easing = "ease-in" | "ease-out" | "ease-in-out";

Destructuring
let [first, second] = [1, 2];
// swap variables
[first, second] = [second, first];
// destructure arrays
let [first, ...rest] = [1, 2, 3, 4];
let [, second, , fourth] = [1, 2, 3, 4];
// objects
let o = {
a: "foo",
b: 12,
c: "bar"
}
let {a, b} = o;

Usage
npm install -g typescript
tsc hello.ts
class Student {
fullName: string;
constructor(public firstName, public
middleInitial, public lastName) {
this.fullName = firstName + " " +
middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " +
person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
var Student = (function () {
function Student(firstName, middleInitial,
lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " +
middleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " +
person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

TypeScript Integrations
• grunt
• gulp
• browserify
• webpack
• jspm

Variable scoping
let foo: string = 'bar';
const foo: string = 'bar';
var let const
scope function block block
immutable No No Yes
Standard ever ES2015 / TS ES2015 / TS
Usecase Not any more ~30% ~70%

Variable scoping
function f(condition: boolean, x: number) {
if (condition) {
let x = 100;
return x;
}
return x;
}
f(false, 0); // returns 0
f(true, 0); // returns 100

Variable scoping
function f(condition, x) {
if (condition) {
var x_1 = 100;
return x_1;
}
return x;
}
f(false, 0); // returns 0
f(true, 0); // returns 100

Interfaces
interface Person {
firstName: string;
lastName: string;
middleName?: string;
}
function combinedName(person: Person): string {
if (person.middleName) {
return person.middleName + ' ' + person.lastName;
} else {
return person.firstName + ' ' + person.lastName;
}
}

Inheriting interfaces
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
const square = <Square>{};
square.color = "blue";
square.sideLength = 10;

Classes
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
tick();
}
function createClock(ctor: ClockConstructor, hour: number, minute: number):
ClockInterface {
return new ctor(hour, minute);
}
class DigitalClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("beep beep");
}
}
class AnalogClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("tick tock");
}
}
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

Classes property visibility
class Person {
protected name: string;
constructor(name: string) { this.name = name; }
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in $
{this.department}.`;
}
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

Interfaces extending Classes
class Control {
private state: any;
}
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control {
select() { }
}
class TextBox extends Control {
select() { }
}
class Image extends Control {
}
class Location {
select() { }
}

Solving the "this" problem
$('#any-button').on('click', function() {
$(this).text('Clicked');
$.get('http://some.api/foo.json').success(function(){
$(this).text('Result');
});
}
var btn = this;
$.get('http://some.api/foo.json').success(function(){
$(btn).text('Result');
});
}

Fatarrow
$.get('http://some.api/foo.json').success(() => {
$(this).text('Result');
});
}
const sum = (a, b) => a+b
const even = n => {
const rest = n % 2
return rest === 0
}

Generics
function identity<T>(arg: T): T {
return arg;
}
let strOutput = identity<string>("foobar");
let numOutput = identity<number>(42);

Generics
class Cake {…}
class Phone {…}
class Box {…}
function box <T> (content: T): Box<T> {
const myBox = new Box<T>(content);
return myBox;
}
box<Cake>(new Cake()) // a box with a cake
box<Phone>(new Phone()) // a box with a phone
box(new Cake()) // also a box with a cake => inference

Iterables
let list = [4, 5, 6];
for (let i in list) {
console.log(i); // "0", "1", "2",
}
for (let i of list) {
console.log(i); // "4", "5", "6"
}

Modules
• Scoping of variables (out of global)
• Code re-use
• Lazy/Async loadable
• Encapsulation
• DRY
• Ease of testing

Modules
• No Modules (or IIFE)
• CommonJS (node.js, SystemJS, Browserify)
• AMD (require.js, SystemJS)
• ES6 (for ES2015 compatible modules)
https://0fps.net/2013/01/22/commonjs-why-and-how/

Modules
export interface IBook {
title: string
pages: number
}
export default class Book implements IBook {
constructor(public title: string, public
pages: number){}
}
import Book, {IBook} from './book'
export interface IBookshelf {
books: IBook[]
maxSize: number
}
export default class Bookshelf implements
IBookshelf {
books: IBook[] = []
constructor (public maxSize: number) {}
addBook (book: IBook) {
if (this.books.length < this.maxSize) {
this.books.push(book)
}
}
import Book from './book'
import Bookshelf from './bookshelf'
let myBookshelf = new Bookshelf(40)
let tsHandbook = new Book('TS Handbook', 42)
myBookshelf.addBook(tsHandbook)
book.ts
bookshelf.ts
index.ts

JavaScript integration
• Already loaded JS libs are ambient modules
• Typedefinition files [library].d.ts provide typed
interfaces for TypeScript
• Typings is a Definition Manager that loads,
updates and maintains definition files
https://github.com/Microsoft/TypeScriptSamples/tree/master/jquery

hhoechtl@1drop.de 
@hhoechtl 
http://blog.1drop.de

TypeScript Introduction

More Related Content

What's hot (20)

Similar to TypeScript Introduction (20)

Recently uploaded (20)

TypeScript Introduction