One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys About Me • sparXys CEO and Senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer Agenda • The why • TypeScript syntax and language features • Building a simple end-to-end app with TypeScript • Summary Wait! JavaScript? Are you nuts? "JavaScript is the assembly language of the Web" Erik Meijer “You can write large programs in JavaScript. You just can’t maintain them” Anders Hejlsberg Let’s Be Serious • JavaScript is really a powerful language: o Functional o Dynamic o Can run everywhere • Huge community • Big eco-system • Tools – IDEs, debuggers, test tools and etc. The Alternatives • We have several alternatives: • Hard core vanilla JavaScript development • JavaScript transpilers • CoffeeScript – http://coffeescript.org • Dart – http://dartlang.org • Clojurescript - https://github.com/clojure/clojurescript • Script# - http://scriptsharp.com/ What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org Hello TypeScript Demo TypeScript is Very Flexible Any Browser Any Host Any OS Tool Support Some TypeScript Key Features Support Support for standard Encapsulation Interfaces and Lambda and Intellisense constructors, JavaScript through classes enums generics and syntax properties and code with and modules support support checking functions static typing Features from the near Future of the Web (ES2015/6), Today • Modules • Shorthand • Classes properties • Arrow functions • Computed • Default parameters properties • Destructuring • Octal / binary literals • Spread and rest • Symbols • Let and const • Template strings • for...ofChoose your compilation• Object literal scenario. methodsIt is up to you! From TypeScript to JavaScript TypeScript Code JavaScript Code TypeScript Compiler class Greeter { var Greeter = (function () { greeting: string; function Greeter(message) { this.greeting = message; constructor(message: string) { } this.greeting = message; Greeter.prototype.greet = function () { } tsc.js return “Hi," + this.greeting; greet() { }; return “Hi," + this.greeting; return Greeter; })(); } } How Good is TypeScript’s Output? tsconfig.json • Enables to configure the compiler options: o Target language (ES3, ES5, ES6) o Module system (AMD, ES6, CommonJS and etc.) o Source map generation o Remove comments when compiling o And more tsconfig.json Demo Some Important Side Notes • All JavaScript code is TypeScript code o Simply copy and paste • All JavaScript libraries work with TypeScript o You will need a declaration file to work with the library @Types Demo 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; } TypeScript Types Type Annotations Demo Classes and Interfaces • You can define classes (same as in ES2015) • You can define interfaces o And implement them later interface IGreeter { var Greeter = (function () { greet(): void; function Greeter() { } } class Greeter implements IGreeter{ Greeter.prototype.greet = function () { greeting: string; greet() { console.log(this.greeting); console.log(this.greeting); }; } return Greeter; } })(); Modules • Uses ES2015 modules syntax export interface IGreeter { var Greeter = (function () { greet(): void; function Greeter() { } } export class Greeter implements Greeter.prototype.greet = function () IGreeter { { greeting: string; console.log(this.greeting); greet() { }; console.log(this.greeting); return Greeter; } }()); } exports.Greeter = Greeter; Classes, Modules and Interfaces Demo Building a Simple End-to-End App with TypeScript Demo TypeScript Versions • TypeScript 1.0 • TypeScript 2.0 • Current version: TypeScript 2.3 What’s New in TypeScript 2? • Generators and Iteration for ES5/ES3 • Type-checking for JavaScript files • Null- and undefined-aware types • ES2017 Spread and Rest • Improved any inference • Tagged union types • And a lot more Questions? Summary • Open source language that compiles into JavaScript • Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today! 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 Thank You!.