Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,189 views

Published on

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

Published in: Technology

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

  1. 1. 
 (heejongahn@gmail.com)
  2. 2. • . • . • http://ahnheejong.name/ • github, twitter @heejongahn
  3. 3. • ?
  4. 4. • ? • , ?
  5. 5. • ? • , ? • [ ] ?
  6. 6. • ? • , ? • [ ] ? • ?
  7. 7. • ? • , ? • [ ] ? • ? • ?
  8. 8. • ? • , ? • [ ] ? • ? • ? • ?
  9. 9. 
 (PR)
  10. 10. 
 (PR) 💩 💩 💩 💩 💩 💩 💩 💩 💩 💩 💩 💩
  11. 11. PR
  12. 12. PR …
  13. 13. PR !
  14. 14. http://earlbarr.com/publications/typestudy.pdf
  15. 15. • ICSE’17 . http://earlbarr.com/publications/typestudy.pdf
  16. 16. • ICSE’17 . • 
 . http://earlbarr.com/publications/typestudy.pdf
  17. 17. • ICSE’17 . • 
 . • “Github open issue 
 ?” http://earlbarr.com/publications/typestudy.pdf
  18. 18. , .
  19. 19. “…using Flow or TypeScript could have prevented 
 15% of the public bugs 
 for public projects on GitHub.”
  20. 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. 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. 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. 23. https://www.youtube.com/watch?v=KQevsm64wPY
  24. 24. • .
  25. 25. • . • .
  26. 26. • . • . • .
  27. 27. • “ .” • + IDE + • , .
  28. 28. https://www.typescriptlang.org/ https://flow.org/
  29. 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. 30. • TypeScript Flow .
  31. 31. • TypeScript Flow . • , .
  32. 32. • TypeScript Flow . • , . • 😇
  33. 33. • TypeScript Flow . • , . • 😇 • 👆 , .
  34. 34. • TypeScript Flow . • , . • 😇 • 👆 , . • .
  35. 35. 😥
  36. 36. • • IDE •
  37. 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. 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. 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. 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. 41. • alert ?
  42. 42. • alert ? •
  43. 43. • alert ? • • !
  44. 44. • alert arg 

  45. 45. • alert arg 
 • if
  46. 46. • alert arg 
 • if • ‘ ’ 
 

  47. 47. • Flow (soundness)
  48. 48. • Flow (soundness) •
  49. 49. • Flow (soundness) • • const
  50. 50. • Flow (soundness) • • const • ‘ ’
  51. 51. • Flow (soundness) • • const • ‘ ’ •
  52. 52. [flow] number (This type is incompatible with 
 an implicitly-returned undefined.) [ts] Type '"JavaScript"' is not comparable to type '"TypeScript" | "Flow"'.
  53. 53. • • IDE •
  54. 54. https://octoverse.github.com/ https://code.visualstudio.com/
  55. 55. • TypeScript • TS ?
  56. 56. • , Go To Definition IDE
  57. 57. • , Go To Definition IDE • ( , ) (link)
  58. 58. • , Go To Definition IDE • ( , ) (link) • JSDoc
  59. 59. • TypeScript 2.5~ • JSDoc • HTML <script> • Zero configuration needed • Flow https://twitter.com/disjukr/status/924216888703426560
  60. 60. • , Go To Definition IDE • ( , ) (link) • JSDoc • (link)
  61. 61. • , Go To Definition IDE • ( , ) (link) • JSDoc • (link) • …
  62. 62. • • IDE •
  63. 63. • https://eng.lyft.com/typescript-at-lyft-64f0702346ea
  64. 64. • https://eng.lyft.com/typescript-at-lyft-64f0702346ea • lyft TypeScript
  65. 65. • https://eng.lyft.com/typescript-at-lyft-64f0702346ea • lyft TypeScript • (2017 9 28 ) • .
  66. 66. # of TypeScript Flow StackOverflow Github (Open/Closed) Github PR (Open/Closed) npm 
 ( + )
  67. 67. # of TypeScript Flow StackOverflow ~ 38,000 ~ 900 Github (Open/Closed) Github PR (Open/Closed) npm 
 ( + )
  68. 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. 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. 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. 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. 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. 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. 74. • … • LoC Flow TypeScript . • . • .
  75. 75. “Love for TypeScript” (https://github.com/Microsoft/TypeScript/issues/10011)
  76. 76. • Plain JavaScript • Flow
  77. 77. • npm install -g typescript • my-cool-lib • • npm install my-cool-lib @types/my-cool-lib
  78. 78. • • , , , / , , … • https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
  79. 79. • • , , / , , …
  80. 80. • —allowSyntheticalDefaultImport • —strict 
 = —noImplicitAny + —noImplicitThis + —alwaysStrict 
 + —strictNullCheck + —strictFunctionType • —lib, —target • . • https://www.typescriptlang.org/docs/handbook/compiler-options.html
  81. 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. 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. 83. • https://www.typescriptlang.org/ docs/handbook/declaration-files/ introduction.html • 
 • .js(x), .ts(x) (e.g. css-in-js)
  84. 84. • .
  85. 85. • . • .
  86. 86. • . • . • .
  87. 87. • myScript.js -> myScript.ts • myComponent.jsx -> myScript.tsx
  88. 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. 89. • • • •
  90. 90. • 
 • 
 • / 
 https://commons.wikimedia.org/wiki/File:Community_Immunity.jpg
  91. 91. → • • + / • +
  92. 92. • • flow-bin -> tsc • • babel-preset-flow
  93. 93. • • Flow: ES6 
 (import type { MyType } import { type MyType } ) • TS: ES6 (import { MyType })
  94. 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. 95. • • : TS
  96. 96. • • : TS • • TS “ … ”
  97. 97. • • : TS • • TS “ … ” • • ! !
  98. 98. • JS(babel-loader) + TS(awesome-ts-loader) • Flow + —allowJS • `in`
  99. 99. • TS JS TS babel-loader
  100. 100. • TS JS TS babel-loader • babel-transform-runtime
  101. 101. • TS JS TS babel-loader • babel-transform-runtime • TS JS Map, Set
  102. 102. • TS JS TS babel-loader • babel-transform-runtime • TS JS Map, Set • • Global State • babel
  103. 103. • —allowJs Flow JS • error TS8010: 'types' can only be used in a .ts file.
  104. 104. • https://github.com/flowtype/flow-remove-types • flow • • … ( )
  105. 105. • https://github.com/Microsoft/ TypeScript/issues/10485 • 
 • Workaround 1
 -> Disjoint Union
  106. 106. • Workaround 2
 -> hasKey ( @pelotom) • optional X
  107. 107. • ? • , ? • TypeScript ? • ? • ? • ?
  108. 108. • , . • , TypeScript . • , . • Webpack . • . • , . !
  109. 109. . . • , . • , TypeScript . • , . • Webpack . • . • , . ! ahnheejong.name | github.com/hejeongahn | twitter.com/heejongahn
  110. 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. 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

×