Getting Started with the TypeScript Language
7 likes710 views
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.
Getting Started with the TypeScript Language
- 1. GETTING STARTED WITH THE TYPESCRIPT LANGUAGE Gil Fink sparXys CEO
- 2. About Me âą sparXys CEO 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
- 5. "JavaScript is the assembly language of the Web" Erik Meijer
- 6. âYou can write large programs in JavaScript. You just canât maintain themâ Anders Hejlsberg
- 7. 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
- 8. Some Alternatives âą We have 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? âTypeScript is a typed superset of JavaScript that compiles to plain JavaScriptâ ~typescriptlang.org
- 11. TypeScript is Very Flexible Any Browser Any Host Any OS Tool Support
- 12. 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
- 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 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
- 15. How Good is TypeScriptâ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 âą 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; }
- 18. TypeScript Types
- 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 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 = {}));
- 22. Classes, Modules and Interfaces Demo
- 23. Building a Simple End-to-End App with TypeScript 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.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. 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!