Introduction to TypeScript

Introduction to TypeScript presentation for my talk at Munich Frontend Meetup

Transcript

1. Introduction to Introduction to TypeScript TypeScript Thomas Mair
2. Overview Overview Introduction Syntax and types 3rd party library integration Configuration and tools
3. What is TypeScript? What is TypeScript? Typed superset of JavaScript Typed superset of JavaScript
4. Optionally typed Optionally typed
5. Transpiles/Compiles to Transpiles/Compiles to JavaScript JavaScript
6. Developed at Microso by Developed at Microso by Anders Hejlsberg Anders Hejlsberg Von DBegley - , , By - Meisner, Jeffrey (August 23, 2012). . . . Retrieved on January 14, 2015. ( )., Public Domain, http://www.flickr.com/photos/begley/2985424826/in/set- 72157608507966144 CC BY 2.0 Link Microso Corporation Microso Unveils a New Look (in English) The Official Microso Blog Microso Direct link Link
7. Advantages Advantages Catch some classes of errors at compile time Provides typings for libraries Good tooling Type inference Allows the usage of new ECMAScript features Framework agnostic Easy to migrate project from JS to TS
8. Disadvantages Disadvantages Another compiler tool Accurate typings for 3rd party libraries
9. Getting started Getting started npm init -y npm install --save-dev typescript ./node_modules/.bin/tsc myprogram.ts
10. Optionally Typed Optionally Typed JavaScript JavaScript Runtime var a = 123; a.trim(); Uncaught TypeError: a.trim is not a function
11. Optionally Typed Optionally Typed TypeScript TypeScript Compile Time var a = 123; a.trim(); Property 'trim' does not exist on type 'number'.
12. Types Types Basic Types Interfaces Functions Generics Advanced Types Enums Classes
13. Basic Types Basic Types boolean number string Array undefined, null any
14. Interfaces Interfaces Define the shape of an object O en used for API return types The TS output of an interface is empty Interfaces are open interface User { name: string; username: string; age?: number; }
15. Functions Functions Type Type function getUser(id: string): Promise<User> { return fetch(`/user/${id}/`); } (id: string) => Promise<User>
16. Generics Generics Type Type function identity(arg: any): any { return arg; } (arg: any) => any identity('Frontend Meetup').length; // 15 identity('Frontend Meetup').foo; // ? undefined
17. Generics Generics Type Type function identity<T>(arg: T): T { return arg; } (arg: T) => T identity('Frontend Meetup').length; // 15 identity('Frontend Meetup').foo; // ? Property 'foo' does not exist on type '"Frontend Meetup"'.
18. Advanced Types Advanced Types Intersection Types Intersection Types interface Named {name: string} interface Aged {age: number} declare type Person = Named & Aged;
19. Advanced Types Advanced Types Union Types Union Types let numberOrString: string | number; numberOrString = 2; numberOrString = 'cat';
20. 3rd party library 3rd party library integration integration writing your own type definitions use @types from the npm registry use bundled type definitions See for further information documentation
21. Type definition files (d.ts) Type definition files (d.ts) function getUser(id) { return fetch(`/user/${id}/`); } interface User { name: string; ... } function getUser(id: string): Promise<User>;
22. @types @types scope in npm registry scope in npm registry Example: jQuery ( ) @types/jquery interface JQueryStatic { (selector: string, context?: any): JQuery; (func: Function): JQuery; (array: any[]): JQuery; } declare var jQuery: JQueryStatic; declare var $: JQueryStatic;
23. Referenced in package json Referenced in package json ( ("types" "types") ) { ... "types": "./lib/types.d.ts", ... }
24. Configuration Configuration Command line parameters for tsc --noImplicitAny tsconfig.json ..., "noImplicitAny": "true", ... See for further information documentation
25. Interesting Options Interesting Options no implicit any strict null checks no unused locals no unused params target (es2015, es5) library (es2016, node, ...) React: jsx, jsx factory Angular: experimental decorators Migration: allow js
26. Tools Tools Webpack support Gulp support support Editor support through language service ts-loader gulp-typescript TSLint Prettier TypeScript Node
27. Refactoring Refactoring Find usages/definitions Find usages/definitions
28. Catch errors at compile time Catch errors at compile time
29. Code completion Code completion
30. Thank You Thank You Questions ??? Questions ???
31. Resources Resources Documentation, Playground, Tutorial Specification Linting