The Power of TypeScript

2

Who am I?

• Jacob Orshalick

• Principal Consultant

• solutionsfit

TypeScript Intro• Developed and maintained by Microsoft

• Can be used on client and server (node.js)

• Any JavaScript program is valid TypeScript

• Definition files allow for use of existing JS libs

• Transpiled (source-to-source compiling)

• Angular 2 is written in TypeScript

• AtScript was absorbed into TypeScript 1.5

Why TypeScript?

• Application-scale JavaScript

• Tomorrow’s JavaScript today

• Transpiles to readable, standards-based JS

• First class types, classes, and modules

TypeScript Tutorial• We need a compiler

• https://github.com/Microsoft/TypeScript/

• npm install -g typescript

Basic Typeslet showQuote: boolean = false;

let numberOfQuotes: number = 15;

let movieName: string = "Waterboy";

let charactersArray: string[] =

[“Napoleon Dynamite", “Pedro”, “Uncle Rico”];

Tupleslet quoteTuple: [string, string] = [“Nacho Libre", “I looked like a fool last night”];

Error:

quoteTuple = [“Nacho Libre", false];

Enumsenum MovieType {Comedy, Drama, Action};

let favoriteMovieTypes: MovieType[] = [MovieType.Comedy, MovieType.Action];

let leastFavoriteMovieTypes: Drink[] = [MovieType[1]];

enum MovieType {Comedy = 1, Drama = 5, Action = 6};

let favoriteMovieTypes: MovieType[] = [MovieType[1], MovieType[6]];

Other Types• any: useful for existing applications

• void: useful for function definitions

let favoriteQuotesOrMovieType : any = MovieType.Comedy;

favoriteQuotesOrMovieType = “Now that’s high quality H2O";

function askQuestion() : void { alert(‘What is your favorite quote?'); }

let keywordfunction getMessage(init: boolean) {

if (init) {

var message = "Weird";

}

return message;

}

console.log(getMessage(true)); // 1

console.log(getMessage(false)); // 2

let keywordfunction getMessage(init: boolean) {

if (init) {

let message = "Weird";

}

return message;

}

console.log(getMessage(true)); // 1

console.log(getMessage(false)); // 2

Looping• for … of statements (targets values)

• for … in statements (targets keys)

let multiCharacterQuotes: string[string,string][] =

[["Coach", "Gatorade!"], ["Bobby Boucher", "You're drinking the wrong water!”]];

for (let quote of multiCharacterQuotes) {

console.log(quote[0] + “: “ + quote[1]);

// “Coach: Gatorade!”, “Bobby Boucher: You’re drinking the wrong water!”

}

let multiCharacterQuotes: string[string,string][] =

[["Coach", "Gatorade!"], ["Bobby Boucher", "You're drinking the wrong water!”]];

for (let i in multiCharacterQuotes) {

console.log(i); // “0”, “1”

}

Arrow Functionsclass Movie {

public quoteForDisplay: string;

constructor(public quotes: string[]) {}

randomizeQuote = () => { this.quoteForDisplay = this.quotes[ Math.floor(Math.random() * this.quotes.length)]; }

}

let movie = new Movie([“Get that corn outta my face”,

“I wanna win!”]);

setTimeout(movie.randomizeQuote,1000);

Annotations… wait, I mean decorators

• Annotations are supported with TypeScript

• Referred to as decorators

• As with other languages, used for framework configuration

imports and exports• … or namespaces and module resolution

• Just the basics here:movie.ts:

export class Movie { // ... }

App.ts

import {Movie} from './movie.ts';

let movie: Movie = new Movie(“Nacho Libre");

TypeScript with Ionic

• http://ionicframework.com/docs/v2/getting-started/installation/

• npm install -g ionic@beta

• ionic start [project-name] --v2 --ts

Questions?

• Jacob Orshalick

• Principal Consultant

• solutionsfit