Download as PDF, PPTX
Uploaded byGil Fink
Getting Started with TypeScript
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.
More Related Content
Similar to Getting Started with TypeScript
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting Started with TypeScript
- 1. meetup.com/javascript-israel SUBMIT YOUR LECTURE: facebook.com/groups/jsisrae http://bit.ly/jsil-apply ThanksTo Our Sponsors: SUPPORT THE COMMUNITY: http://bit.ly/jsil-sponsor
- 2. INTRO TO TYPESCRIPT LANGUAGE GilFink sparXys CEO
- 3. About Me • sparXysCEO 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 theassembly language of the Web" Erik Meijer
- 7. “You can writelarge programs in JavaScript. You just can’t maintain them” Anders Hejlsberg
- 8. JavaScript isn’t ReallyBad • 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 • Wehave 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? “TypeScriptis a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
- 11.
- 12. TypeScript is Very Flexible AnyBrowser Any Host Any OS Tools Support
- 13. Some TypeScript Key Features Support standard JavaScript codewith 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 classGreeter { 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 isTypeScript’s Output?
- 17. Some Important Side Notes •All JavaScript code IS TypeScript code • All JavaScript libraries work with TypeScript
- 18.
- 19. TypeScript Type Annotations • Youcan 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.
- 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 definemodules 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 andInterfaces Demo
- 24. Angular 2: Builtwith 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 • TypeScript1.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.
- 27. Summary • Open sourcelanguage 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.