Statically Typed JavaScript

Transcript

1. { {Statically Typed Statically Typed JavaScript JavaScript} } TypeScript and Flow 1
2. denis@newventuresoftware.com github.com/deniskyashif @deniskyashif 2 . 1
3. 2 . 2
4. 2 . 3
5. 2 . 4
6. Say NO to the slow and painful 3
7. { {Agenda Agenda} } Type Systems TypeScript Flow Q&A 4
8. What is a Type System? 5 . 1
9. 5 . 2
10. { {What is a Type System? What is a Type System?} } Set of rules that assigns a property called type to the various constructs of a computer program, such as variables, expressions, functions or modules. 5 . 3
11. { {Nominal vs Structural Nominal vs Structural} } Nominal: compatibility and equivalence of data types is determined by explicit declarations and/or the name of the types. Structural: type compatibility and equivalence are determined by the type's actual structure or de nition. 5 . 4
12. { {Static vs Dynamic Static vs Dynamic} } Static type checking is the process of verifying the type safety of a program based on analysis of a program's text (source code). Dynamic type checking is the process of verifying the type safety of a program at runtime. 5 . 5
13. 5 . 6
14. 5 . 7
15. 6 . 1
16. { {What is TypeScript? What is TypeScript?} } Language created by Microsoft. Has optional static typing. Compiles to JavaScript. Inherits concepts from C#. Provides language service API. 6 . 2
17. It's always better to catch errors at compile time rather that at runtime. 6 . 3
18. { {Benefits of TypeScript Benefits of TypeScript} } Due to static typing, it's more predictable. Due to modules, namespaces and stronger OOP, it scales better for larger apps. Due to compilation step, some errors are caught compile-time, not run-time. 6 . 4
19. 6 . 5
20. { {Installing TypeScript Installing TypeScript} } Using the Node Package Manager. npm install --global typescript 6 . 6
21. { {Compiling TypeScript Compiling TypeScript} } TypeScript is written in .ts les, which can't be used directly in the browser. It need to be compiled to vanilla .js rst. tsc main.ts 6 . 7
22. { {tsconfig.json tsconfig.json} } Speci es the way TS is compiled. (autogeneratable with tsc --init) { "compilerOptions": { "target": "es5", // Sets the output JS's version "module": "commonjs", // Sets the module loader "outDir": "dist", // Sets output JS files' location "sourceMap": true, // Allows debugging "noEmitOnError": true // Do not compile if errors } } 6 . 8
23. { {Language Features Language Features} } 6 . 9
24. { {Static Type System Static Type System} } “Strongly typed languages reduce bugs by 15%.” 6 . 10
25. { {Basic Types Basic Types} } prede ned in the language: number, string, boolean, Array, enum, undefined, null, tuples, any, void, never 6 . 11
26. { {Live Demo Live Demo} } 6 . 12
27. { {Complex Types Complex Types} } created by the developer 6 . 13
28. { {Classes Classes} } class Employee { name: string; constructor(name: string) { this.name = name; } greet(): string { return `Hi, my name is #{this.name}`; } } 6 . 14
29. { {Interfaces Interfaces} } interface MyInterface { member: number; optionalMember?: boolean; myMethod(param: string[]): number; } const instance: MyInterface = ... 6 . 15
30. { {Live Demo Live Demo} } 6 . 16
31. { {Generics Generics} } Class<T> Creating a component that can work over a variety of types rather than a single one. 6 . 17
32. { {Live Demo Live Demo} } 6 . 18
33. { {Modules Modules} } import / export 6 . 19
34. { {Live Demo Live Demo} } 6 . 20
35. { {EcmaScript Next EcmaScript Next} } 6 . 21
36. { {Live Demo Live Demo} } 6 . 22
37. { {More than a language More than a language} } TypeScript also provides tooling and language services for autocompletion, code navigation and refactoring. 6 . 23
38. { {tssserver tssserver} } Plugins for: Tide(Emacs) VS Code TypeScript Support TypeScript-Sublime-Plugin(Sublime Text) 6 . 24
39. { {Type Definition Files Type Definition Files} } {lib}.d.ts Distributed via NPM npm install --save @types/jquery 6 . 25
40. { {TypeScript and Angular TypeScript and Angular} } 6 . 26
41. 7 . 1
42. Flow is a static type checker for JavaScript. 7 . 2
43. { {Flow Flow} } Developed by Facebook Not a compiler, but checker Goal: No runtime errors 7 . 3
44. Flow checks your code for errors through static type annotations. // @flow function square(n: number): number { return n * n; } square('2'); // Error! 7 . 4
45. A lot of the time, Flow can understand your code without any types at all. TypeScript doesn't catch this without the "noImplicitAny" ag. // @flow function square(n) { return n * n; } square('2'); // Error! 7 . 5
46. Type annotations can also be written as comments. // @flow function strLen(x) /* : string */ { return x.length; } strLen('Hello, world!'); 7 . 6
47. { {Live Demo Live Demo} } 7 . 7
48. Flow only does type checking and relies on Babel or ow-remove-types or some other tool to remove type annotations. TypeScript implements both a type checker and a compiler that emits plain JavaScript. 7 . 8
49. When developers argue about Static vs Dynamic Typing. 8
50. { {Should I use a type checker? Should I use a type checker?} } initial effort to introduce a checker is low but: a type system is a complex thing there seems to be little or no impact on productivity 9
51. { {My recommendation My recommendation} } if your project does not live for long: no if your project is really simple: no if there is a chance you will need to refactor the thing: yes if your system is very important or even crucial for the success of your company: yes if people enter or leave your team frequently: yes 10
52. { {Questions? Questions?} } 11
53. { {Thank You! Thank You!} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif 12
54. {www.newventuresoftware.com}