(heejongahn@gmail.com)

• .

• .

• http://ahnheejong.name/

• github, twitter @heejongahn

• ?

• ?

• , ?

• ?

• , ?

• [ ] ?

• ?

• , ?

• [ ] ?

• ?

• ?

• , ?

• [ ] ?

• ?

• ?

• ?

• , ?

• [ ] ?

• ?

• ?

• ?

(PR)

(PR)

💩

💩

💩

💩

💩💩

💩

💩

💩

💩

💩

💩

PR

PR

…

PR

!

http://earlbarr.com/publications/typestudy.pdf

• ICSE’17 .

http://earlbarr.com/publications/typestudy.pdf

• ICSE’17 .

• .

http://earlbarr.com/publications/typestudy.pdf

• ICSE’17 .

• .

• “Github open issue

?”http://earlbarr.com/publications/typestudy.pdf

, .

“…using Flow or TypeScript could have prevented 15% of the public bugs for public projects on GitHub.”

“ . 10% , . , . That’s

shocking. If you could make a change to the way we do development that would reduce the number of bugs being checked in by 10% or more overnight, that’s a no-brainer. Unless it doubles development time or something, we’d do it.”

“ . 10% , . , . That’s

shocking. If you could make a change to the way we do development that would reduce the number of bugs being checked in by 10% or more overnight, that’s a no-brainer. Unless it doubles development time or something, we’d do it.”

“ . 10% , . , . That’s

shocking. If you could make a change to the way we do development that would reduce the number of bugs being checked in by 10% or more overnight, that’s a no-brainer. Unless it doubles development time or something, we’d do it.”

( TypeScript MS )

https://www.youtube.com/watch?v=KQevsm64wPY

• .

• .

• .

• .

• .

• .

• “ .”

• + IDE +

• , .

https://www.typescriptlang.org/ https://flow.org/

TypeScript Flow

Microsoft Facebook

2012.10.01 2014. 11. 19

Hyperconnect, Reddit, Tumblr, Slack, VS Code, Angular, …

(http://www.typescriptlang.org/community/friends.html)

React, Vue, …

• TypeScript Flow .

• TypeScript Flow .

• , .

• TypeScript Flow .

• , .

• 😇

• TypeScript Flow .

• , .

• 😇

• 👆 , .

• TypeScript Flow .

• , .

• 😇

• 👆 , .

• .

😥

•

• IDE

•

… because JavaScript was not designed around a type system, Flow sometimes has to make a tradeoff. When this happens Flow tends to favor soundness over completeness, ensuring that code doesn’t have any bugs. (https://flow.org/en/docs/lang/types-and-expressions/#soundness-and-completeness-a-classtoc-idtoc-soundness-and-completeness-hreftoc-soundness-and-completenessa)

Non-Goals: [...] Apply a sound or "provably correct" type system. Instead, strike a balance between correctness and productivity. (https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals)

Non-Goals: [...] Apply a sound or "provably correct" type system. Instead, strike a balance between correctness and productivity. (https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals)

“ ” .

.

… because JavaScript was not designed around a type system, Flow sometimes has to make a tradeoff. When this happens Flow tends to favor soundness over completeness, ensuring that code doesn’t have any bugs. (https://flow.org/en/docs/lang/types-and-expressions/#soundness-and-completeness-a-classtoc-idtoc-soundness-and-completeness-hreftoc-soundness-and-completenessa)

.

… because JavaScript was not designed around a type system, Flow sometimes has to make a tradeoff. When this happens Flow tends to favor soundness over completeness, ensuring that code doesn’t have any bugs. (https://flow.org/en/docs/lang/types-and-expressions/#soundness-and-completeness-a-classtoc-idtoc-soundness-and-completeness-hreftoc-soundness-and-completenessa)

Non-Goals: [...] Apply a sound or "provably correct" type system. Instead, strike a balance between correctness and productivity. (https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals)

• alert ?

• alert ?

•

• alert ?

•

• !

• alert arg

• alert arg

• if

• alert arg

• if

• ‘ ’

• Flow (soundness)

• Flow (soundness)

•

• Flow (soundness)

•

• const

• Flow (soundness)

•

• const

• ‘ ’

• Flow (soundness)

•

• const

• ‘ ’

•

[flow] number (This type is incompatible with an implicitly-returned undefined.)

[ts] Type '"JavaScript"' is not comparable to type '"TypeScript" | "Flow"'.

•

• IDE

•

https://octoverse.github.com/

https://code.visualstudio.com/

• TypeScript

• TS ?

• , Go To Definition IDE

• , Go To Definition IDE

• ( , ) (link)

• , Go To Definition IDE

• ( , ) (link)

• JSDoc

• TypeScript 2.5~

• JSDoc

• HTML <script>

• Zero configuration needed

• Flow https://twitter.com/disjukr/status/924216888703426560

• , Go To Definition IDE

• ( , ) (link)

• JSDoc

• (link)

• , Go To Definition IDE

• ( , ) (link)

• JSDoc

• (link)

• …

•

• IDE

•

• https://eng.lyft.com/typescript-at-lyft-64f0702346ea

• https://eng.lyft.com/typescript-at-lyft-64f0702346ea

• lyft TypeScript

• https://eng.lyft.com/typescript-at-lyft-64f0702346ea

• lyft TypeScript

• (2017 9 28 )

• .

# of TypeScript Flow

StackOverflow

Github (Open/Closed)

Github PR(Open/Closed)

npm

( + )

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed)

Github PR(Open/Closed)

npm

( + )

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed)

npm

( + )

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed) ~100 / ~5,000 ~60 / ~1,200

npm

( + )

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed) ~100 / ~5,000 ~60 / ~1,200

npm ~7.2 million ~2.9 million

( + )

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed) ~100 / ~5,000 ~60 / ~1,200

npm ~7.2 million ~2.9 million

( + ) ~3,700 + 250k ~340 + 43k

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed) ~100 / ~5,000 ~60 / ~1,200

npm ~7.2 million ~2.9 million

( + ) ~3,700 + 250k ~340 + 43k

https://octoverse.github.com/

# of TypeScript Flow

StackOverflow ~ 38,000 ~ 900

Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200

Github PR(Open/Closed) ~100 / ~5,000 ~60 / ~1,200

npm ~7.2 million ~2.9 million

( + ) ~3,700 + 250k ~340 + 43k

• …

• LoC Flow TypeScript .

• .

• .

“Love for TypeScript” (https://github.com/Microsoft/TypeScript/issues/10011)

• Plain JavaScript

• Flow

• npm install -g typescript

• my-cool-lib

•

• npm install my-cool-lib @types/my-cool-lib

•

• , , , / , , …

• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

•

• , , / , , …

• —allowSyntheticalDefaultImport

• —strict = —noImplicitAny + —noImplicitThis + —alwaysStrict + —strictNullCheck + —strictFunctionType

• —lib, —target

• .

• https://www.typescriptlang.org/docs/handbook/compiler-options.html

• MS

•

• ts-loader(https://github.com/TypeStrong/ts-loader)

• awesome-typescript-loader(https://github.com/s-panferov/awesome-typescript-loader)

• awesome-typescript-loader ( )

• https://stackoverflow.com/questions/tagged/typescript

https://www.typescriptlang.org/samples/index.html

https://github.com/Microsoft/TypeScriptSamples/

https://github.com/Microsoft/TypeScript/wiki

• https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

•

• .js(x), .ts(x) (e.g. css-in-js)

• .

• .

• .

• .

• .

• .

• myScript.js -> myScript.ts

• myComponent.jsx -> myScript.tsx

• JS TS

• ( ) or

• TS JS

• 1.8~: —allowJs

• 2.3~: —checkJs JS – JSDoc https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files

•

•

•

•

•

•

• /

https://commons.wikimedia.org/wiki/File:Community_Immunity.jpg

→

•

• + /

• +

•

• flow-bin -> tsc

•

• babel-preset-flow

• • Flow: ES6

(import type { MyType } import { type MyType } ) • TS: ES6 (import { MyType })

• • Flow: type Animal = { name: string } • TS: interface Animal { name: string; }

• • Flow: type Dog = Animal & { bark: () => void } • TS: interface Dog extends Animal { bark: () => void; }

•

• : TS

•

• : TS

•

• TS “ … ”

•

• : TS

•

• TS “ … ”

•

• ! !

• JS(babel-loader) + TS(awesome-ts-loader)

• Flow + —allowJS

• `in`

• TS JS TS babel-loader

• TS JS TS babel-loader

• babel-transform-runtime

• TS JS TS babel-loader

• babel-transform-runtime

• TS JS Map, Set

• TS JS TS babel-loader

• babel-transform-runtime

• TS JS Map, Set

•

• Global State

• babel

• —allowJs Flow JS

• error TS8010: 'types' can only be used in a .ts file.

• https://github.com/flowtype/flow-remove-types

• flow

•

• … ( )

• https://github.com/Microsoft/TypeScript/issues/10485

•

• Workaround 1-> Disjoint Union

• Workaround 2-> hasKey ( @pelotom)

• optional X

• ?

• , ?

• TypeScript ?

• ?

• ?

• ?

• , .

• , TypeScript .

• , .

• Webpack .

• .

• , . !

. .

• , .

• , TypeScript .

• , .

• Webpack .

• .

• , . !

ahnheejong.name | github.com/hejeongahn | twitter.com/heejongahn

• To Type or Not to Type: Quantifying Detectable Bugs in JavaScript

• TypeScript Design Goals

• Github Octoverse 2017

• Trade-offs in Control Flow Analysis #9998

• Treat `in` operator as type guard #10485

• Various TypeScript & VS Code release notes

• Why We Chose TypeScript

• TypeScript at Lyft

• Flow and TypeScript

• TypeScript vs. Flow

• Flow vs. TypeScript

• Type Systems for JavaScript: Elm, Flow, and TypeScript