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

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!