Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ionic 2: The Power of TypeScript

965 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×