Typescript in 30mins

Typescript in 30mins

• 1.
  Introduction to TypeScript UdayakumarMathivanan Cloud Solution Architect
• 2.
  Your Logo AGENDA Why TypeScript? Languageintroduction / live-coding TypeScript and Angular Comparison with TS alternatives Conclusion
• 3.
  Your Logo WHAT'S WRONGWITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE) In short: JavaScript development scales badly
• 4.
  Your Logo WHAT'S GOODABOUT JAVASCRIPT? It's everywhere Huge amount of libraries Flexible
• 5.
  Your Logo WISHLIST Scalable HTML5clientside development Modular development Easily learnable for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)
• 6.
  Your Logo TYPESCRIPT In short:Lightweight productivity booster Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment
• 7.
  Your Logo GETTING STARTED $npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts
• 8.
  OPTIONAL TYPES Type annotations >var a = 123 > a.trim() TypeError: undefined is not a function J S = 123> var a: string > a.trim() 'number'Cannot convert to 'string'. TS Type inference Types dissapear at runtime > var a = 123 > a.trim() The property not exist on 'trim' does value of type 'number'.
• 9.
  Your Logo boolean numberstring type[]any void Object void boolean integer long short ... String char Type[] OPTIONAL TYPES
• 10.
  Your Logo OPTIONAL TYPES Typesare structural rather than nominal TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { .. }
• 11.
  Your Logo INTERFACES MyInterface { signature interface //Call (param: member: number): string number optionalMember?: number myMethod(param: string): void MyInterface = ... } var instance: instance(1)
• 12.
  Your Logo INTERFACES Use themto describe data returned in REST calls User) => {$.getJSON('user/123').then((user: showProfile(user.details) }
• 13.
  Your Logo INTERFACES TS interfacesare open-ended: interface JQuery { appendTo(..): .. .. } interface JQuery { draggable(..): .. .. }jquery.d.t s jquery.ui.d.t s
• 14.
  OPTIONAL TYPES: ENUMS enumLanguage { TypeScript, Java, JavaScript } Language.TypeScriptvar lang = var ts = Language[0] ts === "TypeScript" enum Language { TypeScript = 1, Java, JavaScript } var ts = Language[1]
• 15.
  TYPESCRIPT CLASSES Can implementinterfaces Inheritance Instance methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar different
• 16.
  Your Logo ARROW FUNCTIONS Implicitreturn No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) => arg1.toLowerCase(); Lexically-scoped this (no more 'var that = this')
• 17.
  Your Logo string): void} module StorageModule { export interface Storage { store(content: var privateKey = 'storageKey'; export class LocalStorage implements Storage { store(content: string): void { localStorage.setItem(privateKey, content); } } export class DevNullStorage Storage { store(content: string): implements void { } } = new StorageModule.LocalStorage(); } var storage: StorageModule.Storage storage.store('testing'); INTERNAL MODULES
• 18.
  Your Logo string): void} module StorageModule { export interface Storage { store(content: var privateKey = 'storageKey'; export class LocalStorage implements Storage { store(content: string): void { localStorage.setItem(privateKey, content); } } export class DevNullStorage Storage { store(content: string): implements void { } } = new StorageModule.LocalStorage(); } var storage: StorageModule.Storage storage.store('testing'); INTERNAL MODULES
• 19.
  Your Logo INTERNAL MODULES TSinternal modules are open-ended: module export class Webshop { Cart } /// <reference module Webshop path="cart.ts" /> { export class } { .. } cart.ts Catalog { .. } main.ts
• 20.
  Your Logo INTERNAL MODULES TSinternal modules are open-ended: module export class Webshop { Cart } /// <reference module Webshop path="cart.ts" /> { export class } { .. } cart.ts Catalog { .. } main.ts Can be hierarchical: module Webshop.Cart.Backend { ... } Combine modules: $ tsc --out main.js main.ts
• 21.
  Your Logo BUILDING TYPESCRIPT $tsc -watch main.ts grunt-typescript grunt-ts gulp-type (incremental) gulp-tsc
• 22.
  Your Logo TOOLING IntelliJ IDEA WebStorm plugin
• 23.
  Your Logo WHO USESTYPESCRIPT? (duh)
• 24.
  TypeScript Copy JS codeInto TS file Compile to JavaScript • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. • TypeScript is a language for application scale JavaScript development. • Any browser. Any host. Any OS. • Open Source. ~typescriptlang.org JS JSTS
• 25.
  TypeScript Key Features •Support standard JavaScript code with static typing • Zero cost: Static types completely disappear at run-time • Encapsulation though classes, modules and interfaces • Constructors, properties and functions (public, private) • Enums • Lambda and generics support • Intellisense and syntax checking • IDE support • Visual Studio • Sublime Text, Vi, Emacs • Eclipse, WebStorm • Preview Pane – Web Essentials
• 26.
  Highlights Tool Features TypeScriptCode • Type Annotation • Any and Primitive Type • Interface, Implementation • Class, constructor • Opt. Parameter, overloads • Event handler • Get accessor, private, static • Arrow function, lambda • Module • Typed definitions • And more… • Type Inference • Intellisense, statement comp. • Compile on Save • Preview Pane • ECMAScript version • Redirect JavaScript output • Generate declaration files
• 27.
  TypeScript Versions • TypeScript1.3 for VS older (Web Essentials) • TypeScript 1.3 for VS 2013 Update 2 • TypeScript 1.4 for VS 2013 • TypeScript 1.4 for VS 2015 CTP5 • TypeScript 2.0 (vNext)
• 28.
  Your Logo CONCLUSION TypeScript allowsfor gradual adoption Internal modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny
• 29.
  Resources • http://www.typescriptlang.org • http://www.typescriptlang.org/Content/TypeScript%20Languag e%20Specification.pdf •http://www.typescriptlang.org/Playground • http://vswebessentials.com/download • https://github.com/borisyankov/DefinitelyTyped • https://github.com/Microsoft/TypeScript
• 30.
  Angular 2: Builton TypeScript • http://blogs.msdn.com/b/typescript/archive/2015/03/05/angul ar-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
• 31.
  Summary • Open sourcelanguage that compiles into JavaScript • Code encapsulation • Maintainable code • Tooling support Application scale JavaScript development is hard TypeScript makes it easier