Download as PDF, PPTX
Uploaded byGil Fink
Getting Started with the TypeScript Language
This document provides an overview of TypeScript, a typed superset of JavaScript. It discusses why TypeScript was created due to issues maintaining large JavaScript programs. Key features of TypeScript include static typing, classes, interfaces, modules and tooling support. The document demonstrates basic TypeScript syntax like type annotations, classes, and interfaces. It also provides an example of building a simple TypeScript application. In the end, TypeScript compiles to plain JavaScript that can run anywhere.
More Related Content
Similar to Getting Started with the TypeScript Language
Getting Started with the TypeScript Language
- 1. GETTING STARTED WITH THETYPESCRIPT LANGUAGE Gil Fink sparXys CEO
- 2. About Me • sparXysCEO and senior consultant • ASP.NET/IIS Microsoft MVP in the last 6 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rashlatz and ng-conf Israel co-organizer
- 3. Agenda • The Why •TypeScript Syntax and Language Features • Building a Simple App with TypeScript • Summary
- 4.
- 5. "JavaScript is theassembly language of the Web" Erik Meijer
- 6. “You can writelarge programs in JavaScript. You just can’t maintain them” Anders Hejlsberg
- 7. 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
- 8. Some Alternatives • Wehave several alternatives: • Hard core JavaScript development – my Stockholm syndrome • JavaScript preprocessors • CoffeeScript – http://coffeescript.org • Dart – http://dartlang.org • Clojurescript - https://github.com/clojure/clojurescript • Script# - http://scriptsharp.com/
- 9. What is TypeScript? “TypeScriptis a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
- 10.
- 11. TypeScript is Very Flexible AnyBrowser Any Host Any OS Tool Support
- 12. 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
- 13. • 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), Today It is up to you to choose the compilation scenario
- 14. From TypeScript to JavaScript 14 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
- 15. How Good isTypeScript’s Output?
- 16. Some Important Side Notes •All JavaScript code is TypeScript code, simply copy and paste • All JavaScript libraries work with TypeScript
- 17. 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; }
- 18.
- 19.
- 20. Classes and Interfaces •You can define classes • You can define interfaces o And implement them later 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; })();
- 21. 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 = {}));
- 22. Classes, Modules andInterfaces Demo
- 23. Building a SimpleEnd-to-End App with TypeScript 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.5 • Typescript 1.6 Beta (released in 2.9) o React support o Improved module resolution o More ES2015 support • TypeScript 2.0 (vNext no release in the near future)
- 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.