SlideShare a Scribd company logo

End to-end apps with type script

•
•
Gil Fink
Gil Fink

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing, classes, and interface support to JavaScript to help catch errors and maintain large codebases. The presentation covered key TypeScript features like modules, classes, interfaces and type annotations. It demonstrated building a simple end-to-end application with TypeScript and discussed TypeScript versions and resources for learning more.

1 of 23
Download to read offline
End-to-end Apps with 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
"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.
What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
Hello TypeScript Demo
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
• 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!
From TypeScript to JavaScript 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
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
TypeScript Type Annotations • You can add type annotations to variables and functions • If not added, types are inferred by their context var str: string = ‘hello’; // str is annotated as string function foo(name: string) : string { // parameter and function annotated return ‘hello’ + name; }
Classes and Interfaces • You can define classes (same as in ES2015) • 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; })();
Modules • Uses ES2015 modules syntax export interface IGreeter { greet(): void; } export 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; }()); exports.Greeter = Greeter;
Types, 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.2 (since last week )
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 • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
Thank You!

More Related Content

End to-end apps with type script

  • 1. End-to-end Apps with TypeScript Gil Fink CEO and Senior Consultant, sparXys
  • 2. 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
  • 3. Agenda • The why • TypeScript syntax and language features • Building a simple end-to-end app with TypeScript • Summary
  • 4. "JavaScript is the assembly language of the Web" Erik Meijer
  • 5. “You can write large programs in JavaScript. You just can’t maintain them” Anders Hejlsberg
  • 6. 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.
  • 7. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
  • 9. 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
  • 10. • 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!
  • 11. From TypeScript to JavaScript 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
  • 12. 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
  • 14. 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
  • 15. TypeScript Type Annotations • You can add type annotations to variables and functions • If not added, types are inferred by their context var str: string = ‘hello’; // str is annotated as string function foo(name: string) : string { // parameter and function annotated return ‘hello’ + name; }
  • 16. Classes and Interfaces • You can define classes (same as in ES2015) • 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; })();
  • 17. Modules • Uses ES2015 modules syntax export interface IGreeter { greet(): void; } export 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; }()); exports.Greeter = Greeter;
  • 18. Types, Classes, Modules and Interfaces Demo
  • 19. Building a Simple End-to-End App with TypeScript Demo
  • 20. TypeScript Versions • TypeScript 1.0 • TypeScript 2.0 • Current version: TypeScript 2.2 (since last week )
  • 21. Summary • Open source language that compiles into JavaScript • Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
  • 22. Resources • TypeScript – http://www.typescriptlang.org • TypeScript Source Code - https://github.com/Microsoft/TypeScript • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink