- The document discusses TypeScript and Flow, two type systems for JavaScript. It provides information on their history, design goals around soundness vs productivity, usage statistics, and comparisons of their type systems and tooling support. - Key differences noted are that Flow focuses on soundness while TypeScript balances correctness and productivity, and that TypeScript has significantly more resources and adoption based on metrics like StackOverflow questions, GitHub stars, and npm downloads.

1.
(heejongahn@gmail.com)

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

4. • ?

5. • ?
• , ?

6. • ?
• , ?
• [ ] ?

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

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

9. • ?
• , ?
• [ ] ?
• ?
• ?
• ?

11.
(PR)

12.
(PR)
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩

13. PR

14. PR
…

15. PR
!

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

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

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

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

20. ,
.

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

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

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

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

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

26. • .

27. • .
• .

28. • .
• .
• .

29. • “ .”
• + IDE +
• , .

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

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

38. • TypeScript Flow .

39. • TypeScript Flow .
• , .

40. • TypeScript Flow .
• , .
• 😇

41. • TypeScript Flow .
• , .
• 😇
• 👆 , .

42. • TypeScript Flow .
• , .
• 😇
• 👆 , .
• .

43. 😥

45. •
• IDE
•

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

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

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

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

52. • alert ?

53. • alert ?
•

54. • alert ?
•
• !

55. • alert arg

56. • alert arg
• if

57. • alert arg
• if
• ‘ ’

58. • Flow (soundness)

59. • Flow (soundness)
•

60. • Flow (soundness)
•
• const

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

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

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

64. •
• IDE
•

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

67. • TypeScript
• TS ?

68. • , Go To Definition IDE

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

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

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

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

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

74. •
• IDE
•

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

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

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

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

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

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

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

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

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

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

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

87. • …
• LoC Flow TypeScript .
• .
• .

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

91. • Plain JavaScript
• Flow

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

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

94. •
• , , / ,
, …

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

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

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

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

99. • .

100. • .
• .

101. • .
• .
• .

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

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

104. •
•
•
•

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

106. →
•
• + /
• +

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

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

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

112. •
• : TS

113. •
• : TS
•
• TS “ … ”

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

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

116. • TS JS TS babel-loader

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

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

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

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

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

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

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

125. • ?
• , ?
• TypeScript ?
• ?
• ?
• ?

126. • , .
• , TypeScript .
• , .
• Webpack .
• .
• , . !

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

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

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