TypeScript: The Good Cop

Supersets of JavaScript have come and gone. Is TypeScript different? This talk will walk you through the ups and downs of adopting TS across 3 different projects, all in 1 intense year. We’ll start with a bit of a context, explaining why it gained momentum, talking about its strong points as well as its pitfalls. We will then look at some examples of using it in real projects. And in the end, we’ll see why TS is a safety-net we should all benefit from… or should we? Come and find out!

Transcript

1. The Bad Cop Good
2. Who am I? @cassilup • CJ Jan ‘17 • The Good Cop definition?
3. Who am I? @cassilup • CJ Jan ‘17 •
4. TypeScript @cassilup • CJ Jan ‘17 • 1. What 2. How
5. Language for application scale JS development. (aka, Superset of JS) What is this sorcery TypeScript? @cassilup • CJ Jan ‘17 •
6. @cassilup • CJ Jan ‘17 • What is TypeScript?
7. Language for application scale JS development. (aka, Superset of JS) @cassilup • CJ Jan ‘17 • Types Classes Modules What is TypeScript?
8. Language for application scale JS development. (aka, Superset of JS) @cassilup • CJ Jan ‘17 • Types Classes Modules What is TypeScript?
9. Superset of JS Types: the missing spice • ES4, AS3 @cassilup • CJ Jan ‘17 • What is TypeScript?
10. @cassilup • CJ Jan ‘17 • What is TypeScript?
11. @cassilup • CJ Jan ‘17 • ES4 What is TypeScript?
12. @cassilup • CJ Jan ‘17 • ES4 2012 What is TypeScript?
13. @cassilup • CJ Jan ‘17 • http://www-archive.mozilla.org/js/language/old-es4/libraries/types.html What is TypeScript?
14. Superset of JS Types: the missing spice™ • ES4, AS3 Transpiler (tsc), NPM Package @cassilup • CJ Jan ‘17 • What is TypeScript?
15. @cassilup • CJ Jan ‘17 • * Shout out to Yarn. We <3 you!
16. Superset of JS Types: the missing spice™ • ES4, AS3 Transpiler (tsc), NPM Package Primitive types, interfaces • Static analysis, Refactoring, Autocomplete @cassilup • CJ Jan ‘17 • What is TypeScript?
17. : number : string : boolean : Object : <Interface> : Function : () => {} @cassilup • CJ Jan ‘17 • Primitive Types
18. : number : string : boolean : Object : <Interface> : Function : () => {} : any @cassilup • CJ Jan ‘17 • Primitive Types
19. @cassilup • CJ Jan ‘17 • Primitive Types If “everything is an object,” everything is an :any.
20. • Why good/bad cop? • It guards. • It warns. • It fines. (Or it doesn’t.) You configure it. (tsconfig.json) • It speeds you up. @cassilup • CJ Jan ‘17 • What is TypeScript?
21. • Why good/bad cop? • It guards. • It warns. • It fines. (Or it doesn’t.) You configure it. (tsconfig.json) • It speeds you up. @cassilup • CJ Jan ‘17 • • It validates your code against definition files. • All JS code is valid TS code. • Future is now. (Future versions can be used now etc.) • Can be adopted progressively. What is TypeScript?
22. Demo Time @cassilup • CJ Jan ‘17 • https://github.com/cassilup/ts-the-good-cop
23. TypeScript @cassilup • CJ Jan ‘17 • 1. What 2. How
24. Why use TypeScript? • Documentation (Move things from your memory into actual code.) • Static code analysis, Autocomplete • Immediate error-spotting • Safety-net • It only affects development. @cassilup • CJ Jan ‘17 •
25. • Angular 2 (or, you know, 4) • React • Swagger • Good transpiler (tsc) • Big/distributed project/team Why use TypeScript? @cassilup • CJ Jan ‘17 • • Documentation (Move things from your memory into actual code.) • Static code analysis, Autocomplete • Immediate error-spotting • Safety-net • It only affects development.
26. • Culture clash (JS loosely typed by nature) • May cause overhead (maintaining .d.ts) • 3rd Party Lib Definitions (The real problem with TypeScript) • React props can be a pain. • Configuration (Webpack) • Sometimes feels like a blocker instead of an enabler. Why not use TypeScript? @cassilup • CJ Jan ‘17 •
27. What’s it like IRL @cassilup • CJ Jan ‘17 •
28. • 2 types of devs (backend vs. frontend) • IDE vs. Code Editor. (Atom / VSCode / IntelliJ / <your preferred choice>) (Lesson: “Never learn the shortcuts, always master the raw and then use the shortcuts.”) • Starting from scratch is nice. TSX is lovely. • Migrating (ng1) is a pain. The tale of 1k failing unit tests. • Going all-in means CSS Modules. (Typed CSS Modules, that is.) What’s it like IRL @cassilup • CJ Jan ‘17 •
29. • Support/community is ok(ish) • Careful with Versions 1 vs 2. (typings.json vs @types) • allowImplicitAny, aka how to drive your UI team mad. @cassilup • CJ Jan ‘17 • What’s it like IRL (continued)
30. It's a language. But one that just helps JS. Don't let it scare you and don't let it get in your way. You control the degree to which you want it to interfere. You might need it or you might not. Think before you choose. If you’re happy and you know it without types, there’s no need to switch. @cassilup • CJ Jan ‘17 • Conclusion
31. Questions? @cassilup • CJ Jan ‘17 •
32. Thank you! @cassilup • CJ Jan ‘17 • p.s. Keep in touch.
33. • https://www.typescriptlang.org/ • https://www.wikiwand.com/en/ECMAScript • https://www.npmjs.com/package/typescript • https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3#.7pcgrz7pi • https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow • https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d • https://www.typescriptlang.org • https://m.alphasights.com/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b #.ndkmrf4ql @cassilup • CJ Jan ‘17 • Reference