TypeScript와 Flow:  자바스크립트 개발에 정적 타이핑 도입하기

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://ﬂow.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://ﬂow.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://ﬂow.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://ﬂow.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. [ﬂow] number (This type is incompatible with   an implicitly-returned undeﬁned.) [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 Deﬁnition IDE

57. • , Go To Deﬁnition IDE • ( , ) (link)

58. • , Go To Deﬁnition IDE • ( , ) (link) • JSDoc

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

60. • , Go To Deﬁnition IDE • ( , ) (link) • JSDoc • (link)

61. • , Go To Deﬁnition 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 StackOverﬂow Github (Open/Closed) Github PR (Open/Closed) npm   ( + )

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

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

69. # of TypeScript Flow StackOverﬂow ~ 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 StackOverﬂow ~ 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 StackOverﬂow ~ 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 StackOverﬂow ~ 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 StackOverﬂow ~ 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/tsconﬁg-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:// stackoverﬂow.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-ﬁles/ 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. • • ﬂow-bin -> tsc • • babel-preset-ﬂow

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 ﬁle.

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

TypeScript와 Flow: 자바스크립트 개발에 정적 타이핑 도입하기

Heejong Ahn