TypeScript
Download as PPTX, PDF2 likes2,218 views
Udaiappa Ramachandran is a CTO at Akumina, Inc., specializing in cloud computing, IoT, and SharePoint Online, and is involved in various technology communities. The document outlines the features, benefits, and usage of TypeScript, emphasizing its static typing, object-oriented design, and compatibility with JavaScript. Key topics discussed include basic types, functions, classes, interfaces, and modules within TypeScript.
![Tyepscript Annotation
• Type Annotation
• var [identifier]:[type annotation]=value
• var [identifier]:[type annotation];
• var [identifier]=value;
• Example](https://image.slidesharecdn.com/typescript-160223033201/85/TypeScript-10-320.jpg)
![Typescript Functions
• Optional Parameters using ?
• function getAverage(a: number, b: number, c?: number): void { }
• Default parameters using =value
• function concatenate(items: string[], separator = ",", beginAt = 0, endAt = items.length) :void{ }
• Rest parameter using …
• Only one allowed, it must appear last in the parameter list and must be an array type
• function getSum(...a: number[]): number {
• var t = 0;a.forEach(p=>t=t+ p);
• return t;
• }
• var result = getSum(1, 2, 3, 4);
• Overloads
• Overloads in typescript cannot have own implementation but decorate a single implementation
• function getSum(a: string, b: string, c: string): number;
• function getSum(a: number, b: number, c: number): number;
• function getSum(a: any, b: any, c: any): number {
• // implementation signature
• return parseInt(a, 10) + parseInt(b, 10) + parseInt(c, 10);
• }
• Arrow function
• var getSum: (a: number, b: number) => number =(x, y) => (x + y);](https://image.slidesharecdn.com/typescript-160223033201/85/TypeScript-11-320.jpg)
TypeScript
- 1. TypeScript Udaiappa Ramachandran ( Udai ) //linkedin.com/in/udair
- 2. Who am I? • Udaiappa Ramachandran ( Udai ) • CTO, Akumina, Inc., • Consultant • Azure Insider • New Hampshire Cloud User Group (http://www.meetup.com/nashuaug ) • Focus on Cloud Computing (Microsoft Azure and AWS), IoT, SharePoint Online • http://cloudycode.wordpress.com • @nhcloud
- 3. TypeScript - Agenda • Why & What • Basic Types • Interfaces • Functions • Classes • Generics • Modules • Demo • References • Q & A
- 4. Typescript • Why • Javascript is dynamic type • Pro– can hold any object, type on the fly • Con- Can get messy over the time • Migration from server-side to client-side will be hard • Hard to manage, difficult to ensure property types • What • Any valid JavaScript is a typescript • Typescriptlang.org • Typescript lets you write JavaScript the way you really want to. • Typescript is a typed superset of JavaScript that compiles to plain JavaScript. • Any browser. Any host. Any OS. Open Source.
- 5. Typescript Alternatives • Pure JavaScript • Apply JavaScript patterns • Functions as abstractions • Functions to build modules • Functions to avoid global variables • CoffeeScript • Dart
- 6. Typescript Key Features • Supports standard JavaScript code • Provide static typing • Encapsulation through classes and modules • Support for constructors, properties, functions • Define interfaces • Lambda style function support • Intellisense and syntax checking
- 7. Typescript tools • Typescript playground • Visual Studio • sublime • Node.js • WebStorm • Eclipse • Vi • IntelliJ • Emacs
- 9. Tyepscript BasicTypes • Boolean • Number • String • Array • Enum • Enum as Bit Flag 1,2,4,8,16,32,64,128 and so on • Any • Void
- 10. Tyepscript Annotation • Type Annotation • var [identifier]:[type annotation]=value • var [identifier]:[type annotation]; • var [identifier]=value; • Example
- 11. Typescript Functions • Optional Parameters using ? • function getAverage(a: number, b: number, c?: number): void { } • Default parameters using =value • function concatenate(items: string[], separator = ",", beginAt = 0, endAt = items.length) :void{ } • Rest parameter using … • Only one allowed, it must appear last in the parameter list and must be an array type • function getSum(...a: number[]): number { • var t = 0;a.forEach(p=>t=t+ p); • return t; • } • var result = getSum(1, 2, 3, 4); • Overloads • Overloads in typescript cannot have own implementation but decorate a single implementation • function getSum(a: string, b: string, c: string): number; • function getSum(a: number, b: number, c: number): number; • function getSum(a: any, b: any, c: any): number { • // implementation signature • return parseInt(a, 10) + parseInt(b, 10) + parseInt(c, 10); • } • Arrow function • var getSum: (a: number, b: number) => number =(x, y) => (x + y);
- 12. Typescript Interfaces • Interfaces are used at design time to provide auto completion and at compile time to provide type checking • Supported features • Optional properties • Function Types • Array Types • Class Types • Extending Interfaces • Hybrid Types
- 14. Typescript Classes • Object-oriented class based approach • Key features • Inheritance • Private/public modifiers • Accessors • Static properties • Constructor functions • Using class as an interface
- 16. Typescript Generics • Supports generic type variables, types, interfaces, classes and constraints
- 17. Typescript Modules • Encapsulate variables, interfaces, and classes • Define unique namespaces • Organize symbols and identifiers into a logical namespace hierarchy • Similar to namespaces/packages • Splitting across files • Multiple files can use the same module name • One file can contain multiple module • Can define Alias to module • Transpiles to IIFE • Can define modules as internal or external • External modules required only when used with node.js and require.js
- 19. Typescript Declaration Merging • Concept • Merging Interfaces • Merging Modules • Merging Modules with classes, functions, and Enums • Disallowed Merges
- 20. Typescript Type inference and Compatibility • Type inference • Basics • Best common type • Contextual Type • Type Compatibility • Starting out • Comparing two functions • Enums • Classes • Generics • Advanced Topics • Common Errors • Mixins
- 21. Typescript Definition Files • Describes the types defined in external libraries • .d.ts • Not deployed • Usually from DefinitelyTyped • TypeScript Definition manager (tsd) • Specialized package manager • Locates and installs typescript definition files(d.ts) • From the definitelytyped repository
- 22. Demo
- 24. Q & A