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

13a0857775ce894b33288ce85d52efd8?s=128

Bogdan Plieshka

September 24, 2019
Tweet

Transcript

  1. 24.09.2019, React Open Source Meetup

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

    Engineer at Zattoo
  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
  4. Content pages Page 4 24.09.2019, React Open Source Meetup

  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.
  6. 24.09.2019, React Open Source Meetup

  7. 24.09.2019, React Open Source Meetup

  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
  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
  10. passing all of our tests 24.09.2019, React Open Source Meetup

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

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

    Meetup Page 12
  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
  14. and check out what the available options are 24.09.2019, React

    Open Source Meetup Page 14
  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
  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
  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
  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
  19. but…. 24.09.2019, React Open Source Meetup Page 19

  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)
  21. It’s like joining mafia 24.09.2019, React Open Source Meetup Page

    21
  22. 24.09.2019, React Open Source Meetup Page 22

  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
  24. 24.09.2019, React Open Source Meetup Page 24

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

  26. 24.09.2019, React Open Source Meetup Page 26

  27. 24.09.2019, React Open Source Meetup Page 27 What if we

    run our JavaScript with JSDoc under TypeScript compiler?
  28. 24.09.2019, React Open Source Meetup Page 28

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

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

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

  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
  33. do we still have time? 24.09.2019, React Open Source Meetup

    Page 33 github.com/godban/jsdoc-and-typescript
  34. 24.09.2019, React Open Source Meetup have a nice evening!