Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSDoc + TypeScript. Star-crossed lovers

JSDoc + TypeScript. Star-crossed lovers

Having type checking is great, it saves from many errors, helps better understand code base, but it also has own price... most of solutions forcing learn own language superset, require compiling stage and generally slow down development.

Is there any way to save JavaScript freedom and receive all typisation benefits? The answer is yes. This slides is gonna show how to achieve this.

https://github.com/godban/jsdoc-and-typescript

Bogdan Plieshka

September 24, 2019
Tweet

More Decks by Bogdan Plieshka

Other Decks in Programming

Transcript

  1. 24.09.2019, React Open Source Meetup

    View Slide

  2. 24.09.2019, React Open Source Meetup Page 2
    Bogdan Plieshka
    Frontend Engineer at Zattoo

    View Slide

  3. 24.09.2019, React Open Source Meetup Page 3
    Within very small team of 2.5 engineers
    Progressive Web App and Chromecast
    Projects at Zattoo

    View Slide

  4. Content pages
    Page 4
    24.09.2019, React Open Source Meetup

    View Slide

  5. 24.09.2019, React Open Source Meetup Page 5
    We do have a lot of complex business logic scenarios,
    especially for German market where many things are
    legally regulated.
    The more logic you have, the harder it is to understand
    it, and the bigger are the chances to make mistakes.

    View Slide

  6. 24.09.2019, React Open Source Meetup

    View Slide

  7. 24.09.2019, React Open Source Meetup

    View Slide

  8. 24.09.2019, React Open Source Meetup Page 8
    01
    JavaScript linting with ESLint
    02
    Styles linting with Stylelint
    03
    Unit tests with Jest
    04
    Static tests for size, translations, etc.
    05
    Functional tests with Cypress
    06
    Visual tests with Cypress + Jest image snapshot

    View Slide

  9. - when wrong parameters are passed into function
    - a non-existent method has been called
    - or one value messes up with another
    - and your test coverage is <100%
    24.09.2019, React Open Source Meetup Page 9

    View Slide

  10. passing all of our tests
    24.09.2019, React Open Source Meetup Page 10

    View Slide

  11. 24.09.2019, React Open Source Meetup Page 11
    next please

    View Slide

  12. so wrong type shall not pass
    24.09.2019, React Open Source Meetup Page 12

    View Slide

  13. 24.09.2019, React Open Source Meetup Page 13
    You’re facing a new, more complex and
    verbose language, lose your speed and
    dynamic freedom

    View Slide

  14. and check out what the available options are
    24.09.2019, React Open Source Meetup Page 14

    View Slide

  15. 24.09.2019, React Open Source Meetup Page 15
    + Easy to use
    + No specific syntax needed, patching component
    - validation happens in runtime
    - hardly removable from production code
    - covers only React components
    github.com/facebook/prop-types
    reactjs.org/docs/typechecking-with-proptypes.html

    View Slide

  16. 24.09.2019, React Open Source Meetup Page 16
    + easy to integrate
    + static checking
    + autocomplete
    + Facebook support
    - poor coverage for public libraries
    - is dead
    flow.org

    View Slide

  17. 24.09.2019, React Open Source Meetup Page 17
    + easy to implement
    + static checking
    + autocomplete
    + superset of JavaScript
    + great compiler
    + great editors support
    + great third party coverage
    + Microsoft support
    - needs compilation
    - learning curve
    - v1.8
    typescriptlang.org

    View Slide

  18. 24.09.2019, React Open Source Meetup Page 18
    + solid type system
    + autocompletion
    + future syntax
    + good documentation
    + Facebook support
    - entire new language
    - learning curve
    - needs compilation
    reasonml.github.io

    View Slide

  19. but….
    24.09.2019, React Open Source Meetup Page 19

    View Slide

  20. 24.09.2019, React Open Source Meetup Page 20
    We struggled replacing huge,
    unmainatable projects written in
    CoffeeScript and Backbone
    (still not all of them)

    View Slide

  21. It’s like joining mafia
    24.09.2019, React Open Source Meetup Page 21

    View Slide

  22. 24.09.2019, React Open Source Meetup Page 22

    View Slide

  23. 24.09.2019, React Open Source Meetup Page 23
    Markup language used to annotate JS.
    Formed alongside with JavaScript itself, 20 years ago.
    Not evolving much these days. Too good for changes?
    jsdoc.app
    So primal that it
    even has no logo

    View Slide

  24. 24.09.2019, React Open Source Meetup Page 24

    View Slide

  25. not just hints
    24.09.2019, React Open Source Meetup Page 25

    View Slide

  26. 24.09.2019, React Open Source Meetup Page 26

    View Slide

  27. 24.09.2019, React Open Source Meetup Page 27
    What if we run our JavaScript with JSDoc
    under TypeScript compiler?

    View Slide

  28. 24.09.2019, React Open Source Meetup Page 28

    View Slide

  29. What a hell?
    24.09.2019, React Open Source Meetup Page 29

    View Slide

  30. 24.09.2019, React Open Source Meetup Page 30
    typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc

    View Slide

  31. 24.09.2019, React Open Source Meetup Page 31
    typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc

    View Slide

  32. 24.09.2019, React Open Source Meetup Page 32
    + easy to implement
    + easy to write
    + static checking
    + autocomplete
    + it’s JavaScript
    + does not need compilation, unless you want to check types
    + great editors support
    + great third party coverage
    + Microsoft support
    - not everything is supported
    - you are limited by TS limitations, unless you ignore types

    View Slide

  33. do we still have time?
    24.09.2019, React Open Source Meetup Page 33
    github.com/godban/jsdoc-and-typescript

    View Slide

  34. 24.09.2019, React Open Source Meetup
    have a nice evening!

    View Slide