Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Ionic 2: The Power of TypeScript

Ionic 2 has been redesigned from the ground up to improve an already great cross-platform mobile development tool kit. Ionic 2 is still built on Angular, but now includes Angular 2 as its underpinnings. Angular 2 significantly improves the development experience, but much of this improved experience comes from the use of a new language, TypeScript.

If you are a Java or C# developer TypeScript will feel right at home. The syntax and the object-oriented approach all have roots in those popular typed languages. Yet, TypeScript brings the dynamic nature of JavaScript to a very elegant typed syntax. Come to this session to learn the basics of TypeScript and how it will simplify your Ionic development.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Ionic 2: The Power of TypeScript

  1. 1. The Power of TypeScript 2
  2. 2. Who am I? • Jacob Orshalick • Principal Consultant • solutionsfit
  3. 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. 4. Why TypeScript? • Application-scale JavaScript • Tomorrow’s JavaScript today • Transpiles to readable, standards-based JS • First class types, classes, and modules
  5. 5. TypeScript Tutorial • We need a compiler • https://github.com/Microsoft/TypeScript/ • npm install -g typescript
  6. 6. Basic Types let showQuote: boolean = false; let numberOfQuotes: number = 15; let movieName: string = "Waterboy"; let charactersArray: string[] = [“Napoleon Dynamite", “Pedro”, “Uncle Rico”];
  7. 7. Tuples let quoteTuple: [string, string] = [“Nacho Libre", “I looked like a fool last night”]; Error: quoteTuple = [“Nacho Libre", false];
  8. 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. 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. 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. 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. 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. 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. 14. Annotations… wait, I mean decorators • Annotations are supported with TypeScript • Referred to as decorators • As with other languages, used for framework configuration
  15. 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. 16. TypeScript with Ionic • http://ionicframework.com/docs/v2/getting-started/installation/ • npm install -g ionic@beta • ionic start [project-name] --v2 --ts
  17. 17. Questions? • Jacob Orshalick • Principal Consultant • solutionsfit

×