Statically Typed JavaScript

Transcript

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

   View Slide

2. denis@newventuresoftware.com
   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!}
    }
    denis@newventuresoftware.com
    github.com/deniskyashif
    @deniskyashif
    12
    

    View Slide

54. {www.newventuresoftware.com}
    

    View Slide