Statically Typed JavaScript

Statically Typed JavaScript

7a3f4cf57e03f53e7b37c8ef84338460?s=128

Denis Kyashif

November 17, 2017
Tweet

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}