The document discusses TypeScript, its advantages, and challenges for web developers transitioning from JavaScript. It covers installation, configuration, and usage of TypeScript, including type definitions, interface definitions, and integration with tools like npm and webpack. Additionally, it emphasizes the importance of understanding limitations, using linters, and not substituting testing or code reviews with TypeScript alone.

1. Meetup Paris Typescript – 2016/11/24 - @Dashlane
Power Leveling your Typescript
From beginner to master in no time !

2. Who am I ?
Experienced developer
focusing on web for 5 years
@2016 getting things done at Dashlane
https://github.com/Offirmo

3. Welcome to the world of TypeScript
www.typescriptlang.org

4. So you want to become a typescript
master ?
Prove your worth.

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. “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. 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. 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. 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. 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. Quest cleared !
“Understand why using typescript”

12. New Quest:
“Hello World in Typescript”
Do the tutorial: https://www.typescriptlang.org/docs/tutorial.html

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. 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. Quest cleared !
“Hello typescript”

16. Side-quest: “Know your transpiler”
Module
ES6
CommonJS
AMD
UMD
SystemJS
Target
ES3
ES5
ES6
You can pick whatever combo (Module + Target)

17. Execute typescript: node 6 example
Target: node v6
99% ES6
CommonJS
tsc
target = ES6
module = commonjsSource: Typescript
100% ES6, ?% ES7
ES6 modules

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. New Quest:
“Get Things Done in Typescript”

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. 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. 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. Type vs. Interface
● Use interface for grouping
● Use type to define aliases:
type TimeoutMs = number
type AdventureModel =
JsonSchemaBasedModel<IAdventure>

24. Modules Detection
● If no exports, not a module = global variables

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. 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. 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. Type limitations
● Object.assign() => use as …
● .bind() => use ES6

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. typeof
import * as axios from 'axios'
interface Dependencies { axios: typeof axios }
● smell
● hack

31. Can you feel your growth ?

32. Use a npm module
import { debounce } from lodash
Error !
Typescript CAN NOT consume
Javascript (directly)

33. Boss: “Dark Typings”
This boss can never be defeated, only repelled :-(

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. Boss chased away !

36. Choose your class to progress further…
Back-end (node) Front-end (browser) Universal (modules)

37. Back-end
● The simplest ;)
● npm I -D @types/node
● Execute directly: ts-node
– With a shebang

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. 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. 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. (npm) npm-run + cpx
package.json/scripts
"dev1": "tsc --watch",
"dev2": "cpx 'src-ts/**/*.{json,css,png}' src",
"dev": "run-p dev1 dev2",

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

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

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