Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

7.277 visualizaciones

Publicado el

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

Publicado en: Tecnología

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

×