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.
Upcoming SlideShare
Redis From 2.8 to 4.x
Next
Download to read offline and view in fullscreen.

24

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • KiwoonKim

    Apr. 20, 2021
  • reomelove

    Aug. 7, 2019
  • MinseokSeung1

    Jul. 22, 2019
  • ssuser559ad4

    May. 26, 2019
  • seunghochoi4

    Feb. 16, 2019
  • ssuserb2c107

    Jan. 30, 2019
  • howOffa

    Jun. 19, 2018
  • engladgut

    May. 31, 2018
  • twelvepp

    Mar. 21, 2018
  • cocos-x

    Mar. 8, 2018
  • kyoungminyoon7

    Mar. 2, 2018
  • chankim30

    Dec. 3, 2017
  • hyunsangahn

    Nov. 21, 2017
  • iolo

    Nov. 15, 2017
  • caribjin

    Nov. 15, 2017
  • shoo7830

    Nov. 13, 2017
  • kjy2143

    Nov. 13, 2017
  • rotoshine

    Nov. 12, 2017
  • JosephLee13

    Nov. 12, 2017
  • erunc0

    Nov. 11, 2017

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

Views

Total views

11,694

On Slideshare

0

From embeds

0

Number of embeds

2,611

Actions

Downloads

36

Shares

0

Comments

0

Likes

24

×