Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Power Leveling your TypeScript

332 visualizaciones

Publicado el

One Does Not… write TypeScript so easily! In this Meetup talk, I'll share the tricks and pain points I had to learn in my first 6 months of professional TypeScript. The goal is to spare the reader many hours of Stack Overflow...

Publicado en: Ingeniería
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Power Leveling your TypeScript

  1. 1. Meetup Paris Typescript – 2016/11/24 - @Dashlane Power Leveling your Typescript From beginner to master in no time !
  2. 2. Who am I ? Experienced developer focusing on web for 5 years @2016 getting things done at Dashlane https://github.com/Offirmo
  3. 3. Welcome to the world of TypeScript www.typescriptlang.org
  4. 4. So you want to become a typescript master ? Prove your worth.
  5. 5. “I want code that compile” « As an enterprise web application developer, I don't like any scripting or dynamic languages. I like code that compiles (...) TypeScript looks like it will help with some of the problems like having (...) compiling (…) » (somewhere on the net) No. You are asking for a linter. All languages have linters. JS already has an excellent linter: ESLlint TypeScript also has a linter: TSLint They will catch typos and code smells. Use a linter. Now.
  6. 6. “Company BIG™ is using it” ● Created by Microsoft ● Embraced by Google: Angular 2 ● Big contributions from Palantir (tslint, blueprint, …) ● Webpack is considering a rewrite in typescript Following strong players’ lead may be a good move, But could you make your own opinion ?
  7. 7. Yes or No ? ● Editor auto-completion ● Types = documentation – Collaboration – Faster usage ● Types = catching (some) errors – Interfaces – early ● Refactoring ● ... ● New language to learn ● NOT trivial ● More complicated stack ● Typings (find, fix, update…) ● Source maps ● Can’t use some JS tooling ● Bugs ● Lagging behind the standard ● Static typing sometimes refuses good programs and has to be painfully hacked ● ...
  8. 8. Yes or No ? ● Editor auto-completion ● Types = documentation – Collaboration – Faster usage ● Types = catching (some) errors – Interfaces – early ● Refactoring ● ... ● New language to learn ● NOT trivial ● More complicated stack ● Typings (find, fix, update…) ● Source maps ● Can’t use some JS tooling ● Bugs ● Lagging behind the standard ● Static typing sometimes refuses good programs and has to be painfully hacked ● ... Short-term Long-term & important
  9. 9. Quick check ● Do you work in a team ? (3+) ● Do you have time right now ? ● Is it a long-term project or just a MVP ? ● Are you experienced ? ● Does your industry need the best ? (ex. Security) ● Do you like Typescript ?
  10. 10. Don’t ! ● Not a substitute for Unit Tests ● Not a substitute for Code Reviews ● Not a way to go back to your OOP comfort zone – Please learn about functional programming  A Gentle Introduction to Functional JavaScript
  11. 11. Quest cleared ! “Understand why using typescript”
  12. 12. New Quest: “Hello World in Typescript” Do the tutorial: https://www.typescriptlang.org/docs/tutorial.html
  13. 13. Which Typescript ? Go straight at TypeScript 2 (which is latest at this time 2016/11/24) npm i –save-dev typescript yarn add –dev typescript
  14. 14. Setup typescript: “tsconfig.json” https://www.typescriptlang.org/docs/handbook/tsconfig-json.html https://www.typescriptlang.org/docs/handbook/compiler-options.html files to compile must be declared (more about this later) { "compileOnSave": false, "compilerOptions": { "allowJs": false, "noEmitOnError": true, "noImplicitAny": true, (...) "strictNullChecks": true, "target": "ES6", "module": "ES6", "declaration": true, "sourceMap": true, "outDir": “temp/src.es6" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ] } new project from scratch or from existing code ? choose the errors to catch ! or else your IDE may launch transpilation ! output control
  15. 15. Quest cleared ! “Hello typescript”
  16. 16. Side-quest: “Know your transpiler” Module ES6 CommonJS AMD UMD SystemJS Target ES3 ES5 ES6 You can pick whatever combo (Module + Target)
  17. 17. Execute typescript: node 6 example Target: node v6 99% ES6 CommonJS tsc target = ES6 module = commonjsSource: Typescript 100% ES6, ?% ES7 ES6 modules
  18. 18. Execute typescript: node 4 example tsc target = ES6 module = ES6 Target: node v4 57% ES6 CommonJS tsc target = ES5 module = commonjs Source: Typescript 100% ES6, ?% ES7 ES6 modules Intermediate: ES6 100% ES6 ES6 modules babel babel-preset-es2015- node4 FYI: an alternative stack ☟
  19. 19. New Quest: “Get Things Done in Typescript”
  20. 20. Write types ! ● boolean ● number ● string ● void ● Function ● null ● undefined Combine them: Interface Person { name: string age: number friends: Person[] } https://www.typescriptlang.org/docs/handbook/basic-types.html
  21. 21. Nullable by default ! interface Foo { name: string age: number } interface Foo { name: string age: number | undefined } const x: Foo = { name: undefined, age: undefined } const x: Foo = { name: undefined, age: undefined } "StrictNullChecks": true (tsconfig.json)
  22. 22. enum vs. unions const enum Directions { Up, Down, Left, Right } type Directions = 'up' | 'down' | 'left' | 'right' https://www.typescriptlang.org/docs/handbook/enums.html ↓This writing is very convenient
  23. 23. Type vs. Interface ● Use interface for grouping ● Use type to define aliases: type TimeoutMs = number type AdventureModel = JsonSchemaBasedModel<IAdventure>
  24. 24. Modules Detection ● If no exports, not a module = global variables
  25. 25. Argument destructuring function displayPopup( {onCancel, onConfirm}: {onCancel:()=>void, onConfirm:()=>void} ): void { … interface Params { onCancel: () => void onConfirm: () => void } function displayPopup({onCancel, onConfirm}: Params): void { ... https://www.barbarianmeetscoding.com/blog/2016/05/13/argument-destructuring-and-type-annotations-in-typescript/
  26. 26. Hashes and JSON ● Hashes can be typed: interface Colors {[k: string]: Color } ● JSON is a declared type, can be extended: interface JsonSchema extends JSON { title: string additionalProperties: boolean [k: string]: any }
  27. 27. overloading ● Not that simple. Better handled in code itself. function hello(locutor: string, ...locutors: string[]): void { locutors.unshift(locutor) console.log(`Hello, ${locutors.join(', ')} !`) } hello('typescript world') hello('Joe', 'Jack', 'William', 'Averell')
  28. 28. Type limitations ● Object.assign() => use as … ● .bind() => use ES6
  29. 29. Casting: as X, as any as X ● Casting from compatible type: let x: any = { name: ‘Lothar’, age: 32 } let user: Person = x as Person ● Force casting let x: any = { name: ‘Lothar’ } let user: Person = x as any as Person Don’t overuse it ! Valid use case: mock data in tests
  30. 30. typeof import * as axios from 'axios' interface Dependencies { axios: typeof axios } ● smell ● hack
  31. 31. Can you feel your growth ?
  32. 32. Use a npm module import { debounce } from lodash Error ! Typescript CAN NOT consume Javascript (directly)
  33. 33. Boss: “Dark Typings” This boss can never be defeated, only repelled :-(
  34. 34. Need to use a “declaration file” (aka “typing”) ● A special kind of TypeScript file which “annotate” some JS: npm I -D @types/lodash ● You NEED them. But may not exist, not be correct, not be up-to-date ● @types picked automatically by the compiler (since typescript 2) ● Sometimes needed: import * as _ from ‘lodash’ ● Write your own: official doc, tutorial (More about this in next talk !) http://stackoverflow.com/questions/38224232/how-to-consume-npm-modules-from-typescript
  35. 35. Boss chased away !
  36. 36. Choose your class to progress further… Back-end (node) Front-end (browser) Universal (modules)
  37. 37. Back-end ● The simplest ;) ● npm I -D @types/node ● Execute directly: ts-node – With a shebang
  38. 38. Front-end Webpack ● typescript loader: ts-loader React ● Complete class example here ● Special linting rules: tslint-react ● Typed CSS: typestyle ● limitations Angular 2 ● (see tutorials)
  39. 39. Execute typescript: browser Target: browser ES5 bundled webpack + ts-loader + babel (for ES6 modules) Source: Typescript 100% ES6, ?% ES7 ES6 modules See also awesome-typescript-loader
  40. 40. Execute typescript: browser tsc target = ES6 module = ES6 +npm/cpx Target: browser ES5 bundled Source: Typescript 100% ES6, ?% ES7 ES6 modules Intermediate: ES6 100% ES6 ES6 modules + css, png... webpack +babel FYI an alternate 2-steps stack which allows to use create-react-app without modification
  41. 41. (npm) npm-run + cpx package.json/scripts "dev1": "tsc --watch", "dev2": "cpx 'src-ts/**/*.{json,css,png}' src", "dev": "run-p dev1 dev2",
  42. 42. Universal (module) ● Generate several versions of your code: node stable, ES6, UMD ● Generate and expose the typings ● NEVER use default exports: babel and typescript won’t work well (see next slide) ● Beware of conflicting environments – Node vs. browser on SetTimeout
  43. 43. ES6 exports: no default ! ● export default doesn’t play well with all platforms ● Use only named exports export { Foo, bar } ● Named exports are recommended in TypeScript regardless of this issue ● Interesting reads: – http://stackoverflow.com/a/38671949/587407 – http://blog.jonasbandi.net/2016/10/myth-of-superset.html#comment-29295611 55 – http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/ – https://github.com/webpack/webpack/issues/706
  44. 44. Real example of a universal TS npm module ● https://github.com/Offirmo/hello-world-npm ● All envs testable with – https://github.com/Offirmo/cross-js-env-tests
  45. 45. Quest achieved
  46. 46. Next quests: “Advanced” ● Example of ts tyleguide: typescript coding guidelines ● TypeScript formatter: tsfmt ● Call the typescript compiler from a script: – node-typescript-compiler – Allows to dynamically change config ● Useful npm script: syntax watch: "tsc:watch": "npm run tsc -- --watch", ● In special cases, you may have to tweak the –lib option: --lib webworker
  47. 47. Final words: Superset ? ● Superset of JavaScript ? ● Comparison : C++ superset of C ? ● Superset of WELL-WRITTEN JavaScript ? ● http://blog.jonasbandi.net/2016/10/myth-of-superset.html#co mment-2929561155 https://smellegantcode.wordpress.com/2015/07/11/is-typescript-really-a-superset-of-javascript-and-does-it-even-matter/
  48. 48. Thank you
  49. 49. Sources ● http://stackoverflow.com/questions/tagged/typescript?sort=frequent&pageSize=50 ● https://www.reddit.com/r/typescript/comments/3fp1l2/why_bother_with_typescript/ ● http://www.aaron-powell.com/posts/2013-01-07-thoughts-on-typescript.html ● https://smellegantcode.wordpress.com/2015/07/11/is-typescript-really-a-superset-of-javascript-and-does-it-even-matter/ ● https://github.com/Offirmo-team/wiki/wiki/typescript ● I was wrong about typescript https://news.ycombinator.com/item?id=11841502 ● http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/ ● http://www.jbrantly.com/typescript-and-webpack/ ●
  50. 50. Resources ● http://mogmygear.com/index.php ● http://reznik.wikia.com/wiki/Axxa's_Wow_Logo_Creator ● http://achievementgen.com/wow/ ● http://eu.battle.net/wow/fr/media/wallpapers/

×