$30 off During Our Annual Pro Sale. View Details »

Statically Typed JavaScript

Statically Typed JavaScript

Denis Kyashif

November 17, 2017
Tweet

More Decks by Denis Kyashif

Other Decks in Technology

Transcript

  1. {
    {Statically Typed
    Statically Typed
    JavaScript
    JavaScript}
    }
    TypeScript and Flow
    1

    View Slide

  2. [email protected]
    github.com/deniskyashif
    @deniskyashif
    2 . 1

    View Slide

  3. 2 . 2

    View Slide

  4. 2 . 3

    View Slide

  5. 2 . 4

    View Slide

  6. Say NO to the slow and painful
    3

    View Slide

  7. {
    {Agenda
    Agenda}
    }
    Type
    Systems
    TypeScript
    Flow
    Q&A
    4

    View Slide

  8. What is a Type System?
    5 . 1

    View Slide

  9. 5 . 2

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  13. 5 . 6

    View Slide

  14. 5 . 7

    View Slide

  15. 6 . 1

    View Slide

  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

    View Slide

  17. It's always better to catch errors at compile time rather
    that at runtime.
    6 . 3

    View Slide

  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

    View Slide

  19. 6 . 5

    View Slide

  20. {
    {Installing TypeScript
    Installing TypeScript}
    }
    Using the Node Package Manager.
    npm install --global typescript
    6 . 6

    View Slide

  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

    View Slide

  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

    View Slide

  23. {
    {Language Features
    Language Features}
    }
    6 . 9

    View Slide

  24. {
    {Static Type System
    Static Type System}
    }
    “Strongly typed languages reduce bugs by 15%.”
    6 . 10

    View Slide

  25. {
    {Basic Types
    Basic Types}
    }
    prede ned in the language:
    number, string, boolean, Array, enum,
    undefined, null, tuples, any, void, never
    6 . 11

    View Slide

  26. {
    {Live Demo
    Live Demo}
    }
    6 . 12

    View Slide

  27. {
    {Complex Types
    Complex Types}
    }
    created by the developer
    6 . 13

    View Slide

  28. {
    {Classes
    Classes}
    }
    class Employee {
    name: string;
    constructor(name: string) {
    this.name = name;
    }
    greet(): string {
    return `Hi, my name is #{this.name}`;
    }
    }
    6 . 14

    View Slide

  29. {
    {Interfaces
    Interfaces}
    }
    interface MyInterface {
    member: number;
    optionalMember?: boolean;
    myMethod(param: string[]): number;
    }
    const instance: MyInterface = ...
    6 . 15

    View Slide

  30. {
    {Live Demo
    Live Demo}
    }
    6 . 16

    View Slide

  31. {
    {Generics
    Generics}
    }
    Class
    Creating a component that can work over a variety of
    types rather than a single one.
    6 . 17

    View Slide

  32. {
    {Live Demo
    Live Demo}
    }
    6 . 18

    View Slide

  33. {
    {Modules
    Modules}
    }
    import / export
    6 . 19

    View Slide

  34. {
    {Live Demo
    Live Demo}
    }
    6 . 20

    View Slide

  35. {
    {EcmaScript Next
    EcmaScript Next}
    }
    6 . 21

    View Slide

  36. {
    {Live Demo
    Live Demo}
    }
    6 . 22

    View Slide

  37. {
    {More than a language
    More than a language}
    }
    TypeScript also provides tooling and language services
    for autocompletion, code navigation and refactoring.
    6 . 23

    View Slide

  38. {
    {tssserver
    tssserver}
    }
    Plugins for:
    Tide(Emacs)
    VS Code TypeScript Support
    TypeScript-Sublime-Plugin(Sublime
    Text)
    6 . 24

    View Slide

  39. {
    {Type Definition Files
    Type Definition Files}
    }
    {lib}.d.ts
    Distributed via NPM
    npm install --save @types/jquery
    6 . 25

    View Slide

  40. {
    {TypeScript and Angular
    TypeScript and Angular}
    }
    6 . 26

    View Slide

  41. 7 . 1

    View Slide

  42. Flow is a static type checker for JavaScript.
    7 . 2

    View Slide

  43. {
    {Flow
    Flow}
    }
    Developed by Facebook
    Not a compiler, but
    checker
    Goal: No runtime errors
    7 . 3

    View Slide

  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

    View Slide

  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

    View Slide

  46. Type annotations can also be written as comments.
    // @flow
    function strLen(x) /* : string */ {
    return x.length;
    }
    strLen('Hello, world!');
    7 . 6

    View Slide

  47. {
    {Live Demo
    Live Demo}
    }
    7 . 7

    View Slide

  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

    View Slide

  49. When developers argue about Static vs Dynamic
    Typing.
    8

    View Slide

  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

    View Slide

  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

    View Slide

  52. {
    {Questions?
    Questions?}
    }
    11

    View Slide

  53. {
    {Thank You!
    Thank You!}
    }
    [email protected]
    github.com/deniskyashif
    @deniskyashif
    12

    View Slide

  54. {www.newventuresoftware.com}

    View Slide