![Your Logo boolean number string type[]any void Object void boolean integer long short ... String char Type[] OPTIONAL TYPES](https://image.slidesharecdn.com/introductiontotypescript-170203073710/75/Typescript-in-30mins-9-2048.jpg)
![Your Logo OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { .. }](https://image.slidesharecdn.com/introductiontotypescript-170203073710/75/Typescript-in-30mins-10-2048.jpg)
![OPTIONAL TYPES: ENUMS enum Language { TypeScript, Java, JavaScript } Language.TypeScriptvar lang = var ts = Language[0] ts === "TypeScript" enum Language { TypeScript = 1, Java, JavaScript } var ts = Language[1]](https://image.slidesharecdn.com/introductiontotypescript-170203073710/75/Typescript-in-30mins-14-2048.jpg)
Uploaded byUdaya Kumar
Typescript in 30mins
This document introduces TypeScript and provides an overview of its key features. It discusses why TypeScript was created due to issues with JavaScript like dynamic typing and lack of modularity. It also covers TypeScript features like optional static types, interfaces, classes, modules and how it compiles to JavaScript. The presentation concludes by noting TypeScript allows gradual adoption and that application scale JavaScript development is difficult but TypeScript makes it easier.
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.
- 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