1.
The Power of TypeScript
2

2.
Who am I?
• Jacob Orshalick
• Principal Consultant
• solutionsfit

3.
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

4.
Why TypeScript?
• Application-scale JavaScript
• Tomorrow’s JavaScript today
• Transpiles to readable, standards-based JS
• First class types, classes, and modules

5.
TypeScript Tutorial
• We need a compiler
• https://github.com/Microsoft/TypeScript/
• npm install -g typescript

6.
Basic Types
let showQuote: boolean = false;
let numberOfQuotes: number = 15;
let movieName: string = "Waterboy";
let charactersArray: string[] =
[“Napoleon Dynamite", “Pedro”, “Uncle Rico”];

7.
Tuples
let quoteTuple: [string, string] =
[“Nacho Libre", “I looked like a fool last night”];
Error:
quoteTuple = [“Nacho Libre", false];

8.
Enums
enum 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]];

9.
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?');
}

10.
let keyword
function getMessage(init: boolean) {
if (init) {
var message = "Weird";
}
return message;
}
console.log(getMessage(true)); // 1
console.log(getMessage(false)); // 2

11.
let keyword
function getMessage(init: boolean) {
if (init) {
let message = "Weird";
}
return message;
}
console.log(getMessage(true)); // 1
console.log(getMessage(false)); // 2

12.
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”
}

13.
Arrow Functions
class 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);

14.
Annotations… wait, I mean
decorators
• Annotations are supported with TypeScript
• Referred to as decorators
• As with other languages, used for framework
configuration

15.
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");

16.
TypeScript with Ionic
• http://ionicframework.com/docs/v2/getting-started/installation/
• npm install -g ionic@beta
• ionic start [project-name] --v2 --ts

17.
Questions?
• Jacob Orshalick
• Principal Consultant
• solutionsfit