play.node 2017(http://playnode.io/2017/) 에서 발표한 슬라이드입니다.

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