Getting Started with TypeScript
2 likes726 views
This document summarizes an introduction to the TypeScript language presented by Gil Fink, CEO of sparXys. The presentation covered: 1) Why TypeScript was created as a typed superset of JavaScript that compiles to plain JavaScript. 2) Key TypeScript features like classes, modules, interfaces and static typing that allow for code encapsulation and maintainability. 3) How TypeScript supports standard JavaScript as well as features from future versions like ES2015/6. 4) Resources for learning more about TypeScript including the TypeScript website and GitHub repository.
Getting Started with TypeScript
- 1. meetup.com/javascript-israel SUBMIT YOUR LECTURE: facebook.com/groups/jsisrae http://bit.ly/jsil-apply Thanks To Our Sponsors: SUPPORT THE COMMUNITY: http://bit.ly/jsil-sponsor
- 2. INTRO TO TYPESCRIPT LANGUAGE Gil Fink sparXys CEO
- 3. About Me • sparXys CEO and senior consultant • ASP.NET/IIS Microsoft MVP in the last 7 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rashlatz and ng-conf Israel co-organizer
- 4. Agenda • The Why • TypeScript Language Features • Summary
- 6. "JavaScript is the assembly language of the Web" Erik Meijer
- 7. “You can write large programs in JavaScript. You just can’t maintain them” Anders Hejlsberg
- 8. JavaScript isn’t Really Bad • JavaScript is really a powerful language: o Functional o Dynamic o Can run everywhere • Huge community • Libraries • Tools o IDEs o Debuggers o Test tools
- 9. Some Alternatives • We have several alternatives: • Hard core JavaScript development – my Stockholm syndrome • JavaScript preprocessors/transpilers • CoffeeScript – http://coffeescript.org • Dart – http://dartlang.org • Clojurescript - https://github.com/clojure/clojurescript • Script# - http://scriptsharp.com/
- 10. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
- 12. TypeScript is Very Flexible Any Browser Any Host Any OS Tools Support
- 13. Some TypeScript Key Features Support standard JavaScript code with static typing Encapsulation through classes and modules Support for constructors, properties and functions Interfaces and enums support Lambda and generics support Intellisense and syntax checking
- 14. • Modules • Classes • Arrow functions • Default parameters • Destructuring • Spread and rest • Let and const • for...of • Object literal methods • Shorthand properties • Computed properties • Octal / binary literals • Symbols • Template strings Features from the near Future of the Web (ES2015/6), Today Choose your compilation scenario. It is up to you!
- 15. From TypeScript to JavaScript 15 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return “Hi," + this.greeting; } } TypeScript Code JavaScript Code TypeScript Compiler var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return “Hi," + this.greeting; }; return Greeter; })(); tsc.js
- 16. How Good is TypeScript’s Output?
- 17. Some Important Side Notes • All JavaScript code IS TypeScript code • All JavaScript libraries work with TypeScript
- 19. TypeScript Type Annotations • You can add type annotations to variables and functions var str: string = ‘hello’; // str is annotated as string function foo(name: string) : string { // parameter and function annotated return ‘hello’ + name; }
- 20. TypeScript Types
- 21. Classes and Interfaces • You can define classes • You can define interfaces o And implement them later or use to infer typing interface IGreeter { greet(): void; } class Greeter implements IGreeter{ greeting: string; greet() { console.log(this.greeting); } } var Greeter = (function () { function Greeter() { } Greeter.prototype.greet = function () { console.log(this.greeting); }; return Greeter; })();
- 22. Modules • You define modules to wrap classes, interfaces and functions • Use import and export keywords •module app { export interface IGreeter { greet(): void; } export class Greeter implements IGreeter { greeting: string; greet() { console.log(this.greeting); } } } var app; (function (app) { var Greeter = (function () { function Greeter() { } Greeter.prototype.greet = function () { console.log(this.greeting); }; return Greeter; })(); app.Greeter = Greeter; })(app || (app = {}));
- 23. Classes, Modules and Interfaces Demo
- 24. Angular 2: Built with TypeScript • http://blogs.msdn.com/b/typescript/archive/2015/03/05/ang ular-2-0-built-on-typescript.aspx • http://blogs.msdn.com/b/visualstudio/archive/2015/03/12/a -preview-of-angular-2-and-typescript-in-visual-studio.aspx
- 25. TypeScript Versions • TypeScript 1.0 – 1.6 • TypeScript 1.7 o Async/Await for ES6 targets o Polymorphic this Typing o ES6 Module Emitting o ES7 Exponentiation • Current version: TypeScript 1.8 o Released two days ago (22.2)
- 26. Questions?
- 27. Summary • Open source language that compiles into JavaScript • Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
- 28. Resources • TypeScript – http://www.typescriptlang.org • TypeScript Source Code - https://github.com/Microsoft/TypeScript • Definitely Typed – https://github.com/borisyankov/DefinitelyTyped • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
- 29. Thank You!