1.
(heejongahn@gmail.com)

2.
• .
• .
• http://ahnheejong.name/
• github, twitter @heejongahn

3.
• ?

4.
• ?
• , ?

5.
• ?
• , ?
• [ ] ?

6.
• ?
• , ?
• [ ] ?
• ?

7.
• ?
• , ?
• [ ] ?
• ?
• ?

8.
• ?
• , ?
• [ ] ?
• ?
• ?
• ?

9.
(PR)

10.
(PR)
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩

11.
PR

12.
PR
…

13.
PR
!

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

15.
• ICSE’17 .
http://earlbarr.com/publications/typestudy.pdf

16.
• ICSE’17 .
•
.
http://earlbarr.com/publications/typestudy.pdf

17.
• ICSE’17 .
•
.
• “Github open issue
?”
http://earlbarr.com/publications/typestudy.pdf

18.
,
.

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

20.
“ .
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.”

21.
“ .
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.”

22.
“ .
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 )

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

24.
• .

25.
• .
• .

26.
• .
• .
• .

27.
• “ .”
• + IDE +
• , .

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

29.
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, …

30.
• TypeScript Flow .

31.
• TypeScript Flow .
• , .

32.
• TypeScript Flow .
• , .
• 😇

33.
• TypeScript Flow .
• , .
• 😇
• 👆 , .

34.
• TypeScript Flow .
• , .
• 😇
• 👆 , .
• .

35.
😥

36.
•
• IDE
•

37.
… 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)

38.
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)
“
” .
.

39.
… 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)
.

40.
… 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)

41.
• alert ?

42.
• alert ?
•

43.
• alert ?
•
• !

44.
• alert arg

45.
• alert arg
• if

46.
• alert arg
• if
• ‘ ’

47.
• Flow (soundness)

48.
• Flow (soundness)
•

49.
• Flow (soundness)
•
• const

50.
• Flow (soundness)
•
• const
• ‘ ’

51.
• Flow (soundness)
•
• const
• ‘ ’
•

52.
[flow] number (This type is incompatible with
an implicitly-returned undefined.)
[ts] Type '"JavaScript"' is not comparable
to type '"TypeScript" | "Flow"'.

53.
•
• IDE
•

54.
https://octoverse.github.com/
https://code.visualstudio.com/

55.
• TypeScript
• TS ?

56.
• , Go To Definition IDE

57.
• , Go To Definition IDE
• ( , ) (link)

58.
• , Go To Definition IDE
• ( , ) (link)
• JSDoc

59.
• TypeScript 2.5~
• JSDoc
• HTML <script>
• Zero configuration needed
• Flow
https://twitter.com/disjukr/status/924216888703426560

60.
• , Go To Definition IDE
• ( , ) (link)
• JSDoc
• (link)

61.
• , Go To Definition IDE
• ( , ) (link)
• JSDoc
• (link)
• …

62.
•
• IDE
•

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

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

65.
• https://eng.lyft.com/typescript-at-lyft-64f0702346ea
• lyft TypeScript
• (2017 9 28 )
• .

66.
# of TypeScript Flow
StackOverflow
Github
(Open/Closed)
Github PR
(Open/Closed)
npm
( + )

67.
# of TypeScript Flow
StackOverflow ~ 38,000 ~ 900
Github
(Open/Closed)
Github PR
(Open/Closed)
npm
( + )

68.
# of TypeScript Flow
StackOverflow ~ 38,000 ~ 900
Github
(Open/Closed)
~2,400 / ~11,200 ~1,500 / ~2,200
Github PR
(Open/Closed)
npm
( + )

69.
# 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
( + )

70.
# 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
( + )

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

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

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

74.
• …
• LoC Flow TypeScript .
• .
• .

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

76.
• Plain JavaScript
• Flow

77.
• npm install -g typescript
• my-cool-lib
•
• npm install my-cool-lib @types/my-cool-lib

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

79.
•
• , , / ,
, …

80.
• —allowSyntheticalDefaultImport
• —strict
= —noImplicitAny + —noImplicitThis + —alwaysStrict
+ —strictNullCheck + —strictFunctionType
• —lib, —target
• .
• https://www.typescriptlang.org/docs/handbook/compiler-options.html

81.
• MS
•
• ts-loader(https://github.com/TypeStrong/ts-loader)
• awesome-typescript-loader(https://github.com/s-panferov/
awesome-typescript-loader)
• awesome-typescript-loader ( )

82.
• https://
stackoverflow.com/
questions/tagged/
typescript
https://www.typescriptlang.org/
samples/index.html
https://github.com/Microsoft/TypeScriptSamples/
https://github.com/Microsoft/TypeScript/wiki

83.
• https://www.typescriptlang.org/
docs/handbook/declaration-files/
introduction.html
•
• .js(x), .ts(x)
(e.g. css-in-js)

84.
• .

85.
• .
• .

86.
• .
• .
• .

87.
• myScript.js -> myScript.ts
• myComponent.jsx -> myScript.tsx

88.
• JS TS
• ( ) or
• TS JS
• 1.8~: —allowJs
• 2.3~: —checkJs JS – JSDoc
https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files

89.
•
•
•
•

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

91.
→
•
• + /
• +

92.
•
• flow-bin -> tsc
•
• babel-preset-flow

93.
•
• Flow: ES6
(import type { MyType } import { type MyType } )
• TS: ES6 (import { MyType })

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

95.
•
• : TS

96.
•
• : TS
•
• TS “ … ”

97.
•
• : TS
•
• TS “ … ”
•
• ! !

98.
• JS(babel-loader) + TS(awesome-ts-loader)
• Flow + —allowJS
• `in`

99.
• TS JS TS babel-loader

100.
• TS JS TS babel-loader
• babel-transform-runtime

101.
• TS JS TS babel-loader
• babel-transform-runtime
• TS JS Map, Set

102.
• TS JS TS babel-loader
• babel-transform-runtime
• TS JS Map, Set
•
• Global State
• babel

103.
• —allowJs Flow JS
• error TS8010: 'types' can only be used in a .ts file.

104.
• https://github.com/flowtype/flow-remove-types
• flow
•
• … ( )

105.
• https://github.com/Microsoft/
TypeScript/issues/10485
•
• Workaround 1
-> Disjoint Union

106.
• Workaround 2
-> hasKey ( @pelotom)
• optional X

107.
• ?
• , ?
• TypeScript ?
• ?
• ?
• ?

108.
• , .
• , TypeScript .
• , .
• Webpack .
• .
• , . !

109.
. .
• , .
• , TypeScript .
• , .
• Webpack .
• .
• , . !
ahnheejong.name | github.com/hejeongahn | twitter.com/heejongahn

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

111.
• Why We Chose TypeScript
• TypeScript at Lyft
• Flow and TypeScript
• TypeScript vs. Flow
• Flow vs. TypeScript
• Type Systems for JavaScript: Elm, Flow, and TypeScript