Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Meetup Paris Typescript – 2016/11/24 - @Dashlane
Power Leveling your Typescript
From beginner to master in no time !
Who am I ?
Experienced developer
focusing on web for 5 years
@2016 getting things done at Dashlane
https://github.com/Offi...
Welcome to the world of TypeScript
www.typescriptlang.org
So you want to become a typescript
master ?
Prove your worth.
“I want code that compile”
« As an enterprise web application developer, I don't like any scripting or
dynamic languages. ...
“Company BIG™ is using it”
● Created by Microsoft
● Embraced by Google: Angular 2
● Big contributions from Palantir (tslin...
Yes or No ?
● Editor auto-completion
● Types = documentation
– Collaboration
– Faster usage
● Types = catching (some) erro...
Yes or No ?
● Editor auto-completion
● Types = documentation
– Collaboration
– Faster usage
● Types = catching (some) erro...
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 ?
● Ar...
Don’t !
● Not a substitute for Unit Tests
● Not a substitute for Code Reviews
● Not a way to go back to your OOP comfort z...
Quest cleared !
“Understand why using typescript”
New Quest:
“Hello World in Typescript”
Do the tutorial: https://www.typescriptlang.org/docs/tutorial.html
Which Typescript ?
Go straight at TypeScript 2
(which is latest at this time 2016/11/24)
npm i –save-dev typescript
yarn a...
Setup typescript: “tsconfig.json”
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html https://www.typescriptla...
Quest cleared !
“Hello typescript”
Side-quest: “Know your transpiler”
Module
ES6
CommonJS
AMD
UMD
SystemJS
Target
ES3
ES5
ES6
You can pick whatever combo (Mo...
Execute typescript: node 6 example
Target: node v6
99% ES6
CommonJS
tsc
target = ES6
module = commonjsSource: Typescript
1...
Execute typescript: node 4 example
tsc
target = ES6
module = ES6
Target: node v4
57% ES6
CommonJS
tsc
target = ES5
module ...
New Quest:
“Get Things Done in Typescript”
Write types !
● boolean
● number
● string
● void
● Function
● null
● undefined
Combine them:
Interface Person {
name: stri...
Nullable by default !
interface Foo {
name: string
age: number
}
interface Foo {
name: string
age: number | undefined
}
co...
enum vs. unions
const enum Directions {
Up,
Down,
Left,
Right
}
type Directions = 'up' | 'down' | 'left' | 'right'
https:/...
Type vs. Interface
● Use interface for grouping
● Use type to define aliases:
type TimeoutMs = number
type AdventureModel ...
Modules Detection
● If no exports, not a module = global variables
Argument destructuring
function displayPopup(
{onCancel, onConfirm}: {onCancel:()=>void, onConfirm:()=>void}
): void { …
i...
Hashes and JSON
● Hashes can be typed:
interface Colors {[k: string]: Color }
● JSON is a declared type, can be extended:
...
overloading
● Not that simple. Better handled in code itself.
function hello(locutor: string, ...locutors: string[]): void...
Type limitations
● Object.assign() => use as …
● .bind() => use ES6
Casting: as X, as any as X
● Casting from compatible type:
let x: any = { name: ‘Lothar’, age: 32 }
let user: Person = x a...
typeof
import * as axios from 'axios'
interface Dependencies { axios: typeof axios }
● smell
● hack
Can you feel your growth ?
Use a npm module
import { debounce } from lodash
Error !
Typescript CAN NOT consume
Javascript (directly)
Boss: “Dark Typings”
This boss can never be defeated, only repelled :-(
Need to use a “declaration file” (aka “typing”)
● A special kind of TypeScript file which “annotate” some JS:
npm I -D @ty...
Boss chased away !
Choose your class to progress further…
Back-end (node) Front-end (browser) Universal (modules)
Back-end
● The simplest ;)
● npm I -D @types/node
● Execute directly: ts-node
– With a shebang
Front-end
Webpack
● typescript loader: ts-loader
React
● Complete class example here
● Special linting rules: tslint-react...
Execute typescript: browser
Target: browser
ES5
bundled
webpack
+ ts-loader
+ babel (for ES6
modules)
Source: Typescript
1...
Execute typescript: browser
tsc
target = ES6
module = ES6
+npm/cpx
Target: browser
ES5
bundled
Source: Typescript
100% ES6...
(npm) npm-run + cpx
package.json/scripts
"dev1": "tsc --watch",
"dev2": "cpx 'src-ts/**/*.{json,css,png}' src",
"dev": "ru...
Universal (module)
● Generate several versions of
your code: node stable, ES6,
UMD
● Generate and expose the typings
● NEV...
ES6 exports: no default !
● export default doesn’t play well with all platforms
● Use only named exports export { Foo, bar...
Real example of a universal TS npm module
● https://github.com/Offirmo/hello-world-npm
● All envs testable with
– https://...
Quest achieved
Next quests: “Advanced”
● Example of ts tyleguide: typescript coding guidelines
● TypeScript formatter: tsfmt
● Call the t...
Final words: Superset ?
● Superset of JavaScript ?
● Comparison : C++ superset of C ?
● Superset of WELL-WRITTEN JavaScrip...
Thank you
Sources
● http://stackoverflow.com/questions/tagged/typescript?sort=frequent&pageSize=50
● https://www.reddit.com/r/typesc...
Resources
● http://mogmygear.com/index.php
● http://reznik.wikia.com/wiki/Axxa's_Wow_Logo_Creator
● http://achievementgen....
Prochain SlideShare
Chargement dans…5
×

Power Leveling your TypeScript

343 vues

Publié le

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...

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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/

×