TypeScript

Obaid ur RehmanLead Software Engineer

In this Talk - Agenda• What is TypeScript• What is TypeScript.• Why TypeScript• A guided tour of the Language

• AngularJS + TypeScript

Large Scale JavaScript

development is hard

TypeScript: A typed superset of JavaScript that

compiles to plain JavaScript.

Superset of JavaScript

Modular

Scalable Application Structure

Strongly Typed

Tooling Support

ES6 Support

Future JavaScript => Now

TypeScript provides a number of features that are planned in ES6 & ES7 for current JavaScript engines (that only

support ES5 etc).

+ +

+ +

TypeScript

ES6•Classes•Modules•Arrow Functions

What is Typescript

ES5

TypeScript Demo• Basic Types• Any Type• Interfaces• Classes• Modules• Generics• Mixins

var n: number;

var a; // no type -> Any

var s = "Max"; // Contextual typing -> string

n = 5; // valid because 5 is a numbera = 5; // valid because a is of type Anya = "Hello"; // valid because a is of type Any

n = "Hello"; // compile time error because // "Hello" is not a number

Type Basics

Any

Primitive TypesNumberBooleanString

Contextual typingDetermine result type from expressions automatically

var [identifier]

: [type-annotation]

= value

var [identifier]

: [type-annotation]

var [identifier]

= value

var person = function (age: number) { this.age = age;  this.growOld = function () { this.age++; alert(this.age); }  this.growOldL = () => { this.age++; alert(this.age); }}  var p = new person(1);setTimeout(p.growOldL, 100);setTimeout(alert(p.age), 100);

Type Basics

Lambda Functionaka. Arrow function

• Eliminates the needs for typing function over and over again.

• Lexically captures the meaning of this

function getAverage(a: number, b: number, c?: number) {

var total = a + b;

if (c) total = total + c;

return total;}

function getAverages(...a: number[]):number { var total = 0; for (var i = 0; i < a.length; i++) { total += a[i]; } return total;}

Type Basics

Functions

Optional ParametersDefault Parameters

Rest ParametersRest parameters allow caller to specify zero or more arguments of the specified type.

function getTotal(a: string, b: string, c: string): number;function getTotal(a: number, b: number, c: number): number;function getTotal(a: number, b: string, c: number): number;

// implementation signaturefunction getTotal(a: any, b: any, c?: any): number { var total = parseInt(a, 10) + parseInt(b, 10) + parseInt(c, 10); return total;}var result = getTotal(2, 2, 2);alert(result);

Type Basics

Functions

• Overloading

interface IStudent { id: number; name: string; onLeave?: boolean;}function printStudent(s: IStudent) {}

// Describing function types

interface searchFunction { (source: string, subString: string):boolean} var searchFunctionImpl: searchFunction = function (s, ss) { return true; }

Type Basics

InterfacesInterface can be used as an abstracttype that can be implemented by concrete classes, but they can also be used to define any structure in your TypeScriptprogram.

Interfaces are also capable of describing function types.

abstract class A {  foo(): number { return this.bar(); }  abstract bar(): number;}

// error, Cannot create an instance of the abstract class 'A'var a = new A();  

class B extends A {  bar() { return 1; }}

var b = new b();  // success, all abstracts are defined 

Type Basics

Abstract Classes (v 1.6, Sept 16th)

Similar in some ways to interfaces, abstract classes give you a way of creating a base class, complete with default implementations

class Student { private name: string;  constructor(name: string, age: number) { this.name = name; }  print() { alert(this.name); }}

TODO: Static Types

Type Basics

Classes

TypeScript classes become JavaScript pseudo-classeshttp://javascript.info/tutorial/pseudo-classical-pattern

Enforcement of private variables is at runtime only.

class Animal { Name: string;  constructor(name: string) { this.Name = name; }  move(meters = 0) { alert(this.Name + " moved " + meters); }} class Snake extends Animal { }

class MyStudent implements IStudent { id: number; name: string; onLeave: boolean;} 

Type Basics

Types of Class Heritage

Implements & Extends

There are two types of class heritage in TypeScript. A class can implement an interface using the implements keywordand a class can inherit from another class using the extends keyword.

// Internal Modules.

module Shipping { export interface Ship { name: string; tons: number; }  export class NewShip implements Ship { name = "New Ship"; tons = 500; }}// Splitting into multiple files./// <reference path=“Shipping.ts" />

tsc --out all.js app1.ts

Type Basics

Modules

Gives you various ways to organize your code in TypeScript.

1. Internal Modules2. External Modules

// External Modules.

export class Ship { name = "New Ship"; tons = 500;}

// ---------------------------------

import Shipping = require('Ship')var s = new Shipping.Ship();

// ---------------------------------

tsc --module commonjs app1.tstsc --module amd app1.ts

Type Basics

Modules

External Modules• AMD using

RequireJs• CommonJs

class MyContainer<T> {

private array: T[];

constructor(array: T[]) { this.array = array; }

add(item: T) { this.array.push(item); }}

var strContainer = new MyContainer<number>([1]);strContainer.add(2);

Type Basics

Generics

Gives you the ablility to create a component that can work over a variety of types rather than a single one.

Generic Constraints

$('#id').html('TypeScript complains that $ is undefined');

Type Basics

Ambient Declarations

Ambient declarations can be used to add type information to existing JavaScript. Commonly, this would meanadding type information for your own existing code, or for a third-party library that you want to consume in your TypeScript program.

Using TypeScript with existing Libraries

• DefinitelyTyped - http://definitelytyped.org/• http://definitelytyped.org/tsd/

Other Stuff• Mixins• Iterators• Decorators• Union Types, Type Guards• Intersection types• Local type declarations• ES6 generators• Asyn/await

Future of TypeScript• Angular 2.0 is built on TypeScript• Plans to keep it aligned with ES6 & ES7• Currently at v1.6

Recommendations For Folio3

• Do all new JavaScript Projects in TS, be it• client side JS app • a Hybrid mobile app (Sencha, Ionic et.al)• a nodeJs server side app

AngularJS 1.x + TypeScript

Aurangzaib Siddiqui

End of Part 1