Ionic 2: The Power of TypeScript

Ionic 2: The Power of TypeScript

• 1.
  The Power ofTypeScript 2
• 2.
  Who am I? •Jacob Orshalick • Principal Consultant • solutionsfit
• 3.
  TypeScript Intro • Developedand 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-scaleJavaScript • Tomorrow’s JavaScript today • Transpiles to readable, standards-based JS • First class types, classes, and modules
• 5.
  TypeScript Tutorial • Weneed 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, Imean 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