TypeScript와 Flow: 자바스크립트 개발에 정적 타이핑 도입하기
-
Upload
heejong-ahn -
Category
Technology
-
view
2.772 -
download
0
Transcript of TypeScript와 Flow: 자바스크립트 개발에 정적 타이핑 도입하기
• .
• .
• http://ahnheejong.name/
• github, twitter @heejongahn
• ?
• ?
• , ?
• ?
• , ?
• [ ] ?
• ?
• , ?
• [ ] ?
• ?
• ?
• , ?
• [ ] ?
• ?
• ?
• ?
• , ?
• [ ] ?
• ?
• ?
• ?
(PR)
(PR)
💩
💩
💩
💩
💩💩
💩
💩
💩
💩
💩
💩
PR
PR
…
PR
!
http://earlbarr.com/publications/typestudy.pdf
• ICSE’17 .
http://earlbarr.com/publications/typestudy.pdf
• ICSE’17 .
• .
http://earlbarr.com/publications/typestudy.pdf
• ICSE’17 .
• .
• “Github open issue
?”http://earlbarr.com/publications/typestudy.pdf
, .
“…using Flow or TypeScript could have prevented 15% of the public bugs for public projects on GitHub.”
“ . 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.”
“ . 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.”
“ . 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 )
https://www.youtube.com/watch?v=KQevsm64wPY
• .
• .
• .
• .
• .
• .
• “ .”
• + IDE +
• , .
https://www.typescriptlang.org/ https://flow.org/
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, …
• TypeScript Flow .
• TypeScript Flow .
• , .
• TypeScript Flow .
• , .
• 😇
• TypeScript Flow .
• , .
• 😇
• 👆 , .
• TypeScript Flow .
• , .
• 😇
• 👆 , .
• .
😥
•
• IDE
•
… 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)
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)
“ ” .
.
… 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)
.
… 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)
• alert ?
• alert ?
•
• alert ?
•
• !
• alert arg
• alert arg
• if
• alert arg
• if
• ‘ ’
• Flow (soundness)
• Flow (soundness)
•
• Flow (soundness)
•
• const
• Flow (soundness)
•
• const
• ‘ ’
• Flow (soundness)
•
• const
• ‘ ’
•
[flow] number (This type is incompatible with an implicitly-returned undefined.)
[ts] Type '"JavaScript"' is not comparable to type '"TypeScript" | "Flow"'.
•
• IDE
•
https://octoverse.github.com/
https://code.visualstudio.com/
• TypeScript
• TS ?
• , Go To Definition IDE
• , Go To Definition IDE
• ( , ) (link)
• , Go To Definition IDE
• ( , ) (link)
• JSDoc
• TypeScript 2.5~
• JSDoc
• HTML <script>
• Zero configuration needed
• Flow https://twitter.com/disjukr/status/924216888703426560
• , Go To Definition IDE
• ( , ) (link)
• JSDoc
• (link)
• , Go To Definition IDE
• ( , ) (link)
• JSDoc
• (link)
• …
•
• IDE
•
• https://eng.lyft.com/typescript-at-lyft-64f0702346ea
• https://eng.lyft.com/typescript-at-lyft-64f0702346ea
• lyft TypeScript
• https://eng.lyft.com/typescript-at-lyft-64f0702346ea
• lyft TypeScript
• (2017 9 28 )
• .
# of TypeScript Flow
StackOverflow
Github (Open/Closed)
Github PR(Open/Closed)
npm
( + )
# of TypeScript Flow
StackOverflow ~ 38,000 ~ 900
Github (Open/Closed)
Github PR(Open/Closed)
npm
( + )
# of TypeScript Flow
StackOverflow ~ 38,000 ~ 900
Github (Open/Closed) ~2,400 / ~11,200 ~1,500 / ~2,200
Github PR(Open/Closed)
npm
( + )
# 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
( + )
# 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
( + )
# 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
# 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/
# 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
• …
• LoC Flow TypeScript .
• .
• .
“Love for TypeScript” (https://github.com/Microsoft/TypeScript/issues/10011)
• Plain JavaScript
• Flow
• npm install -g typescript
• my-cool-lib
•
• npm install my-cool-lib @types/my-cool-lib
•
• , , , / , , …
• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
•
• , , / , , …
• —allowSyntheticalDefaultImport
• —strict = —noImplicitAny + —noImplicitThis + —alwaysStrict + —strictNullCheck + —strictFunctionType
• —lib, —target
• .
• https://www.typescriptlang.org/docs/handbook/compiler-options.html
• MS
•
• ts-loader(https://github.com/TypeStrong/ts-loader)
• awesome-typescript-loader(https://github.com/s-panferov/awesome-typescript-loader)
• awesome-typescript-loader ( )
• https://stackoverflow.com/questions/tagged/typescript
https://www.typescriptlang.org/samples/index.html
https://github.com/Microsoft/TypeScriptSamples/
https://github.com/Microsoft/TypeScript/wiki
• https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
•
• .js(x), .ts(x) (e.g. css-in-js)
• .
• .
• .
• .
• .
• .
• myScript.js -> myScript.ts
• myComponent.jsx -> myScript.tsx
• JS TS
• ( ) or
• TS JS
• 1.8~: —allowJs
• 2.3~: —checkJs JS – JSDoc https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files
•
•
•
•
•
•
• /
https://commons.wikimedia.org/wiki/File:Community_Immunity.jpg
→
•
• + /
• +
•
• flow-bin -> tsc
•
• babel-preset-flow
• • Flow: ES6
(import type { MyType } import { type MyType } ) • TS: ES6 (import { MyType })
• • Flow: type Animal = { name: string } • TS: interface Animal { name: string; }
• • Flow: type Dog = Animal & { bark: () => void } • TS: interface Dog extends Animal { bark: () => void; }
•
• : TS
•
• : TS
•
• TS “ … ”
•
• : TS
•
• TS “ … ”
•
• ! !
• JS(babel-loader) + TS(awesome-ts-loader)
• Flow + —allowJS
• `in`
• TS JS TS babel-loader
• TS JS TS babel-loader
• babel-transform-runtime
• TS JS TS babel-loader
• babel-transform-runtime
• TS JS Map, Set
• TS JS TS babel-loader
• babel-transform-runtime
• TS JS Map, Set
•
• Global State
• babel
• —allowJs Flow JS
• error TS8010: 'types' can only be used in a .ts file.
• https://github.com/flowtype/flow-remove-types
• flow
•
• … ( )
• https://github.com/Microsoft/TypeScript/issues/10485
•
• Workaround 1-> Disjoint Union
• ?
• , ?
• TypeScript ?
• ?
• ?
• ?
• , .
• , TypeScript .
• , .
• Webpack .
• .
• , . !
. .
• , .
• , TypeScript .
• , .
• Webpack .
• .
• , . !
ahnheejong.name | github.com/hejeongahn | twitter.com/heejongahn
• 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
• Why We Chose TypeScript
• TypeScript at Lyft
• Flow and TypeScript
• TypeScript vs. Flow
• Flow vs. TypeScript
• Type Systems for JavaScript: Elm, Flow, and TypeScript