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

• .
• .
• http://ahnheejong.name/
• github, twitter @heejongahn

• ?
• , ?
• [ ] ?
• ?
• ?

• ?
• , ?
• [ ] ?
• ?
• ?
• ?

(PR)
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩
💩

http://earlbarr.com/publications/typestudy.pdf

• ICSE’17 .

• ICSE’17 .
•  
.

• ICSE’17 .
•  
.
• “Github open issue
 
?”

“…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.”
( TypeScript MS )

https://www.youtube.com/watch?v=KQevsm64wPY

• “ .”
• + IDE +
• , .

https://www.typescriptlang.org/ https://ﬂow.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 .
• , .
• 😇

• , .
• 😇
• 👆 , .

• , .
• 😇
• 👆 , .
• .

… 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)

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://ﬂow.org/en/docs/lang/types-and-expressions/#soundness-and-completeness-a-
classtoc-idtoc-soundness-and-completeness-hreftoc-soundness-and-completenessa)
 
.

• alert arg  
• if
• ‘ ’

• Flow (soundness)
•
• const

•
• const
• ‘ ’

•
• const
• ‘ ’
•

[ﬂow] number (This type is incompatible with  
an implicitly-returned undeﬁned.)
[ts] Type '"JavaScript"' is not comparable
to type '"TypeScript" | "Flow"'.

https://octoverse.github.com/
https://code.visualstudio.com/

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

• ( , ) (link)
• JSDoc

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

• ( , ) (link)
• JSDoc
• (link)

• ( , ) (link)
• JSDoc
• (link)
• …

• https://eng.lyft.com/typescript-at-lyft-64f0702346ea

• lyft TypeScript

• lyft TypeScript
• (2017 9 28 )
• .

# of TypeScript Flow
StackOverﬂow
Github
(Open/Closed)
Github PR
(Open/Closed)
npm  
( + )

StackOverﬂow ~ 38,000 ~ 900
Github
(Open/Closed)
Github PR
(Open/Closed)
npm  
( + )

Github
(Open/Closed)
~2,400 / ~11,200 ~1,500 / ~2,200
Github PR
(Open/Closed)
npm  
( + )

Github
(Open/Closed)
~2,400 / ~11,200 ~1,500 / ~2,200
Github PR
(Open/Closed)
~100 / ~5,000 ~60 / ~1,200
npm  
( + )

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
( + )

Github
(Open/Closed)
~2,400 / ~11,200 ~1,500 / ~2,200
Github PR
(Open/Closed)
~100 / ~5,000 ~60 / ~1,200
npm  
( + )
~3,700 + 250k ~340 + 43k

Github
(Open/Closed)
~2,400 / ~11,200 ~1,500 / ~2,200
Github PR
(Open/Closed)
~100 / ~5,000 ~60 / ~1,200
npm  
( + )
~3,700 + 250k ~340 + 43k
https://octoverse.github.com/

• …
• LoC Flow TypeScript .
• .
• .

“Love for TypeScript” (https://github.com/Microsoft/TypeScript/issues/10011)

• npm install -g typescript
• my-cool-lib
•
• npm install my-cool-lib @types/my-cool-lib

•
• , , , /
, , …
• https://www.typescriptlang.org/docs/handbook/tsconﬁg-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://
stackoverﬂow.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-ﬁles/
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

•
• ﬂow-bin -> tsc
•
• babel-preset-ﬂow

•
• 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 “ … ”
•
• ! !

• JS(babel-loader) + TS(awesome-ts-loader)
• Flow + —allowJS
• `in`

• TS JS TS babel-loader
• babel-transform-runtime

• TS JS Map, Set

• TS JS Map, Set
•
• Global State
• babel

• —allowJs Flow JS
• error TS8010: 'types' can only be used in a .ts ﬁle.

• https://github.com/flowtype/flow-remove-types
• flow
•
• … ( )

• https://github.com/Microsoft/
TypeScript/issues/10485
•  
• Workaround 1 
-> Disjoint Union

• Workaround 2 
-> hasKey ( @pelotom)
• optional X

• ?
• , ?
• 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

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

More Related Content

What's hot (20)

Viewers also liked (7)

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

More from Heejong Ahn (7)

Recently uploaded (20)