Getting Started with the TypeScript Language
7 likes709 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!