Skip to content

Latest commit

ย 

History

History
406 lines (274 loc) ยท 32.1 KB

README.ko.md

File metadata and controls

406 lines (274 loc) ยท 32.1 KB

Definitely Typed

์ด ์ €์žฅ์†Œ๋Š” ๊ณ ํ’ˆ์งˆ์˜ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript) ์ž๋ฃŒํ˜• ์ •์˜(Type definition)๋ฅผ ์œ„ํ•œ ์ €์žฅ์†Œ์ž…๋‹ˆ๋‹ค.

์ด ๋„์›€๋ง์€ ์˜์–ด, ์ŠคํŽ˜์ธ์–ด, ๋Ÿฌ์‹œ์•„์–ด, ๊ทธ๋ฆฌ๊ณ  ์ค‘๊ตญ์–ด๋กœ๋„ ์ฝ์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๊ด€๋ฆฌ์ž ์„ค๋ช…์„œ ๋งํฌ

๋ชฉ์ฐจ

ํ˜„์žฌ ์ƒํƒœ

์ €์žฅ์†Œ ๋ฐ ํผ๋ธ”๋ฆฌ์‹ฑ ๊ณผ์ •์˜ ์ƒํƒœ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์—ฌ์ž๋ถ„๋“ค์ด ์ž‘์„ฑํ•œ PR ๋˜๋Š” ํŒจํ‚ค์ง€์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๊ฒฝ์šฐ ์ด ํ‘œ์‹œ๋ฅผ ๋ณด๋ฉด ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ตœ์‹  ๋นŒ๋“œ๊ฐ€ ํƒ€์ž… ์ฒดํฌ/๋ฆฐํŠธ ๊ณผ์ •์„ ๊น”๋”ํ•˜๊ฒŒ ํ†ต๊ณผํ–ˆ์Šต๋‹ˆ๋‹ค: Build Status
  • ๋ชจ๋“  ํŒจํ‚ค์ง€๊ฐ€ typescript@next์ƒ์—์„œ ํƒ€์ž… ์ฒดํฌ/๋ฆฐํŠธ ๊ณผ์ •์„ ๊น”๋”ํ•˜๊ฒŒ ํ†ต๊ณผํ•ฉ๋‹ˆ๋‹ค: Build Status
  • ๋ชจ๋“  ํŒจํ‚ค์ง€๊ฐ€ 1์‹œ๊ฐ„ ๋‚ด์— npm์— ๋ฐฐํฌ๋˜์—ˆ์Šต๋‹ˆ๋‹ค: Publish Status
  • typescript-bot์ด Definitely Typed์—์„œ ์ž˜ ๋Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค Activity Status

์ƒํƒœ ํ‘œ์‹œ๊ฐ€ ๋น„์ •์ƒ์ด๊ฑฐ๋‚˜ ๊ณ ์žฅ ํ‘œ์‹œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด Definitely Typed Gitter ์ฑ„๋„์—์„œ ์ด ๋ฌธ์ œ๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”.

https://gitter.im/DefinitelyTyped/DefinitelyTyped ์—์„œ ๋Œ€ํ™”์— ์ฐธ์—ฌํ•ด๋ณด์„ธ์š”

์„ ์–ธ ํŒŒ์ผ(Declaration file)์ด ๋ญ”๊ฐ€์š”?

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์•ˆ๋‚ด์„œ(TypeScript handbook)๋ฅผ ์ฝ์–ด๋ณด์„ธ์š”.

์–ด๋–ป๊ฒŒ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‚˜์š”?

npm

์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค:

npm install --save-dev @types/node

node ๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜•(Typing)์ด ์ปดํŒŒ์ผ ๊ณผ์ •์— ์ž๋™์œผ๋กœ ํฌํ•จ๋  ๊ฒ๋‹ˆ๋‹ค. ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ types ์ฐธ์กฐ๋ฅผ ์ถ”๊ฐ€ํ•ด ์ฃผ์–ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

/// <reference types="node" />

๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•ˆ๋‚ด์„œ(Handbook)์—์„œ ํ™•์ธํ•ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

NPM ์˜ "foo" ํŒจํ‚ค์ง€์— ๋Œ€์‘๋˜๋Š” ์ž๋ฃŒํ˜• ํŒจํ‚ค์ง€๋Š” "@types/foo" ์ž…๋‹ˆ๋‹ค. ์›ํ•˜์‹œ๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ, ํƒ€์ž…์„œ์น˜(TypeSearch) ์‚ฌ์ดํŠธ์—์„œ ํ•œ ๋ฒˆ ์ฐพ์•„๋ณด์„ธ์š”.

๊ทธ๋ž˜๋„ ์ฐพ์„ ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ, ์ฐพ๊ณ  ์žˆ๋Š” ํŒจํ‚ค์ง€๊ฐ€ ์ž๋ฃŒํ˜•(Typing)์„ ํ•จ๊ป˜ ์ œ๊ณตํ•˜๊ณ  ์žˆ์ง€๋Š” ์•Š์€์ง€ ํ™•์ธํ•ด๋ณด์„ธ์š”. ์ด ๊ฒฝ์šฐ ์ฃผ๋กœ package.json ํŒŒ์ผ์˜ "types" ๋‚˜ "typings" ํ•„๋“œ(Field)๋ฅผ ํ†ตํ•ด ์ œ๊ณต๋˜์ง€๋งŒ, /// <reference path="" /> ๊ฐ™์€ ์ฃผ์„์„ ์‚ฌ์šฉํ•˜์—ฌ ํŒจํ‚ค์ง€ ์•ˆ์˜ ".d.ts" ํŒŒ์ผ๋“ค์„ ์ง์ ‘ ๊ฐ€์ ธ์™€์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ „ ๋ฒ„์ „ TypeScript (2.9 ๋˜๋Š” ๊ทธ ์ด์ „)

Definitely Typed๋Š” 2๋…„์ด ์ง€๋‚˜์ง€ ์•Š์€ TypeScript ๋ฒ„์ „๋งŒ์„ ๋Œ€์ƒ์œผ๋กœ ํŒจํ‚ค์ง€๋ฅผ ํ…Œ์ŠคํŠธํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ๋ฒ„์ „ 3.0 ๋ฐ ๊ทธ ์ด์ƒ๋งŒ์„ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. TypeScript 2.0์—์„œ 2.9 ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ๊ทธ๋ž˜๋„ @types ํŒจํ‚ค์ง€๋ฅผ ํ•œ๋ฒˆ ์„ค์น˜ํ•ด ๋ณด์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค. ์ตœ์‹  TypeScript ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ‚ค์ง€๋Š” ๊ทธ๋ฆฌ ๋งŽ์ง€ ์•Š์œผ๋‹ˆ๊นŒ์š”. ๊ทธ๋Ÿฌ๋‚˜ ์ž‘๋™ ์—ฌ๋ถ€๋ฅผ ๋ณด์žฅํ•˜์ง€๋Š” ๋ชปํ•ฉ๋‹ˆ๋‹ค. ์ง€์› ๊ธฐ๊ฐ„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

๋ฒ„์ „ ์ถœ์‹œ์ผ ์ง€์› ์ข…๋ฃŒ
2.8 2018๋…„ 3์›” 2020๋…„ 3์›”
2.9 2018๋…„ 5์›” 2020๋…„ 5์›”
3.0 2018๋…„ 7์›” 2020๋…„ 7์›”
3.1 2018๋…„ 9์›” 2020๋…„ 9์›”
3.2 2018๋…„ 11์›” 2020๋…„ 11์›”
3.3 2019๋…„ 1์›” 2021๋…„ 1์›”
3.4 2019๋…„ 3์›” 2021๋…„ 3์›”
3.5 2019๋…„ 5์›” 2021๋…„ 5์›”
3.6 2019๋…„ 8์›” 2021๋…„ 8์›”
3.7 2019๋…„ 11์›” 2021๋…„ 11์›”
3.8 2020๋…„ 2์›” 2022๋…„ 2์›”
3.9 2020๋…„ 5์›” 2022๋…„ 5์›”

@types ํŒจํ‚ค์ง€ ์•ˆ์—๋Š” ํŒจํ‚ค์ง€๊ฐ€ ํ™•์‹คํ•˜๊ฒŒ ์ง€์›ํ•˜๋Š” TypeScript ๋ฒ„์ „์ด ํƒœ๊ทธ๋กœ ์“ฐ์—ฌ ์žˆ์œผ๋ฏ€๋กœ, 2๋…„ ์ง€์› ๊ธฐ๊ฐ„์ด ์ง€๋‚œ ์˜ค๋ž˜๋œ ํŒจํ‚ค์ง€๋„ ๋ณดํ†ต ์ฐพ์•„๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, npm dist-tags @types/react ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด TypeScript 2.5๋Š” [email protected]์šฉ ํƒ€์ž…์„, TypeScript 2.6 ๋ฐ 2.7์€ [email protected]์šฉ ํƒ€์ž…์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

ํƒœ๊ทธ ๋ฒ„์ „
latest 16.9.23
ts2.0 15.0.1
... ...
ts2.5 16.0.36
ts2.6 16.4.7
ts2.7 16.4.7
... ...

TypeScript 1.*

  • ์ด ์ €์žฅ์†Œ์˜ master ๋ธŒ๋žœ์น˜์—์„œ ์ง์ ‘ ๋‹ค์šด๋กœ๋“œํ•ด ํ”„๋กœ์ ํŠธ์— ์‚ฝ์ž…ํ•˜๊ธฐ
  • Typings๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ (๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”. typings๋Š” ๋”์ด์ƒ ์ถ”์ฒœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค)
  • NuGet ์„ ์‚ฌ์šฉํ•˜๊ธฐ (๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”. NuGet์€ ๋” ์ด์ƒ DT ์ž๋ฃŒํ˜•(Typing)์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.)

์œ„ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์ˆ˜๋™์œผ๋กœ ์ฐธ์กฐ(Reference)๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์–ด๋–ป๊ฒŒ ๊ธฐ์—ฌํ•˜๋‚˜์š”?

Definitely Typed๋Š” ์—ฌ๋Ÿฌ๋ถ„๊ณผ ๊ฐ™์€ ๋งŽ์€ ๊ธฐ์—ฌ์ž๋“ค์˜ ๋„์›€ ๋•๋ถ„์— ๋Œ์•„๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

ํ…Œ์ŠคํŠธ

๊ฐœ์„ ํ•œ ๋ถ€๋ถ„์„ ์„ธ์ƒ์— ๊ณต์œ ํ•˜๊ธฐ ์ „์— ๋จผ์ € ์ง์ ‘ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.

์ด๋ฏธ ์กด์žฌํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•˜๊ธฐ

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ๋ชจ๋“ˆ ์ฆ๊ฐ•(module augmentation)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  node_modules/@types/foo/index.d.ts ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•˜์‹ค ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ์ด ํŒŒ์ผ์„ ๋ณต์‚ฌํ•œ ๋‹ค์Œ ์•„๋ž˜์˜ ๊ณผ์ •์„ ๋”ฐ๋ผํ•˜์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ ํŒจํ‚ค์ง€๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ

์‚ฌ์šฉํ•˜๊ณ  ๊ณ„์‹  tsconfig.json ์— ๋‹ค์Œ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.

"baseUrl": "types",
"typeRoots": ["types"],

(types ๋Œ€์‹  src/types ์„ ์‚ฌ์šฉํ•˜์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.) ๊ทธ๋ฆฌ๊ณ  "foo" ๋ชจ๋“ˆ(Module)์— ๋Œ€ํ•œ ์„ ์–ธ(Declaration)์„ ํฌํ•จํ•˜๋Š” types/foo/index.d.ts ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”. ์ด์ œ ์ฝ”๋“œ ์•ˆ์—์„œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ƒˆ ์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์„ ์‚ฌ์šฉํ•˜๋Š” "foo" ๋ชจ๋“ˆ(Module)์„ ์ž„ํฌํŠธ(Import)ํ•˜์‹ค ์ˆ˜ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผํ•˜๊ณ  ์‹คํ–‰์‹œ์ผœ์„œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ž๋ฃŒํ˜•(Typing)์ด ์‹คํ–‰ ์ค‘์— ์‹ค์ œ๋กœ ๋ฒŒ์–ด์ง€๋Š” ์ผ๊ณผ ์ž˜ ๋งž์•„๋–จ์–ด์ง€๋Š”์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”. ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•œ ํ™•์ธ์ด ๋๋‚˜๋ฉด, ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”. ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์ƒˆ ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ์œ„ํ•œ ๊ณผ์ •๋“ค์„ ๋”ฐ๋ผํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request) ๋งŒ๋“ค๊ธฐ

ํŒจํ‚ค์ง€๊ฐ€ ์ž˜ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์…จ๋‹ค๋ฉด, Definitely Typed์— ๊ณต์œ ํ•ด์ฃผ์„ธ์š”.

์šฐ์„ , ์ด ์ €์žฅ์†Œ๋ฅผ ํฌํฌ(fork)ํ•ด ์ฃผ์‹œ๊ณ , node ๋ฅผ ์„ค์น˜ํ•˜์‹  ๋’ค, npm install ๋ช…๋ น์„ ์‹คํ–‰ํ•ด์ฃผ์„ธ์š”.

์ด๋ฏธ ์กด์žฌํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ˆ˜์ •ํ•˜๊ธฐ

  • cd types/my-package-to-edit ๋ช…๋ น์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์ž๋ฃŒํ˜•(Typing) ํŒŒ์ผ๋“ค์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๋„ ์žŠ์ง€๋งˆ์„ธ์š”! ๋งŒ์•ฝ ๋ธŒ๋ ˆ์ดํ‚น ์ฒด์ธ์ง€(Breaking change)๋ฅผ ๋งŒ๋“œ์…จ๋‹ค๋ฉด, ๋ฉ”์ด์ € ๋ฒ„์ „(major version)์„ ๊ผญ ์˜ฌ๋ ค์ฃผ์„ธ์š”.
  • ํŒจํ‚ค์ง€ ๋จธ๋ฆฟ์ฃผ์„์˜ "Definitions by" ๋ถ€๋ถ„์— ์—ฌ๋Ÿฌ๋ถ„์˜ ์ด๋ฆ„์„ ์ถ”๊ฐ€ํ•˜์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ด๋ฆ„์„ ์ถ”๊ฐ€ํ•˜์‹œ๋ฉด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๊ทธ ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋‚˜ ์ด์Šˆ(Issue)๋ฅผ ๋งŒ๋“ค ๋•Œ ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ์•Œ๋žŒ์ด ๊ฐ‘๋‹ˆ๋‹ค.
    • // Definitions by: Alice <https://github.com/alice>, Bob <https://github.com/bob> ์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์ด๋ฆ„์„ ์ค„์˜ ๋งจ ๋งˆ์ง€๋ง‰์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์‚ฌ๋žŒ์ด ๋„ˆ๋ฌด ๋งŽ์„ ๊ฒฝ์šฐ์—”, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—ฌ๋Ÿฌ ์ค„๋กœ ์“ฐ์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
    // Definitions by: Alice <https://github.com/alice>
    //                 Bob <https://github.com/bob>
    //                 Steve <https://github.com/steve>
    //                 John <https://github.com/john>
  • tslint.json ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒฝ์šฐ์—๋Š”, npm run lint package-name ๋ช…๋ น์„ ์‹คํ–‰์‹œํ‚ค๊ณ  ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š”, ํ•ด๋‹น ํŒจํ‚ค์ง€๊ฐ€ ์žˆ๋Š” ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—์„œ tsc ๋ช…๋ น์„ ์‹คํ–‰์‹œํ‚ค๊ณ  ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

์ด๋ฏธ ์กด์žฌํ•˜๋Š” ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋ฅผ ๋งŒ๋“ค์—ˆ์„ ๊ฒฝ์šฐ์—๋Š”, dt-bot ์ด ์ด์ „ ์ €์ž๋“ค์„ ์ž๋™์œผ๋กœ ํ˜ธ์ถœํ•˜๋Š”์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š”, ์—ฌ๋Ÿฌ๋ถ„์ด ์ง์ ‘ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)์™€ ๊ด€๊ณ„์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์„ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ

๋งŒ์•ฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š” ์ค‘์ด๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript)๋กœ ์“ฐ์—ฌ์žˆ๋‹ค๋ฉด, Definitely Typed ์— ์„ ์–ธ(Declaration)์„ ์˜ฌ๋ฆฌ๋Š” ๋Œ€์‹  ํŒจํ‚ค์ง€์— ์ž๋™์ƒ์„ฑ๋œ ์„ ์–ธ(Declaration) ํŒŒ์ผ์„ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

NPM ํŒจํ‚ค์ง€๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“œ์‹œ๋ ค๋ฉด, ํŒจํ‚ค์ง€์˜ ์ด๋ฆ„๊ณผ ๊ฐ™์€ ์ด๋ฆ„์˜ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”. NPM ์— ์˜ฌ๋ผ๊ฐ€ ์žˆ์ง€ ์•Š์€ ํŒจํ‚ค์ง€๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“œ์‹œ๋ ค๋ฉด, ๊ทธ ํŒจํ‚ค์ง€๊ฐ€ NPM ์— ์˜ฌ๋ผ์™€ ์žˆ๋Š” ํŒจํ‚ค์ง€์™€ ์ด๋ฆ„์ด ๊ฒน์น˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”. (npm info foo ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ foo ํŒจํ‚ค์ง€๊ฐ€ NPM ์— ์žˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)

์ƒˆ ์ž๋ฃŒํ˜• ํŒจํ‚ค์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ์–ด์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

ํŒŒ์ผ ์ด๋ฆ„ ์šฉ๋„
index.d.ts ํŒจํ‚ค์ง€๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜•(Typing)์„ ํฌํ•จํ•˜๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.
foo-tests.ts ์ž๋ฃŒํ˜•(Typing)์˜ ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•œ ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. ์ด ํŒŒ์ผ์˜ ์ฝ”๋“œ๋Š” ์‹คํ–‰๋˜์ง€๋Š” ์•Š์ง€๋งŒ, ์ž๋ฃŒํ˜• ๊ฒ€์‚ฌ(Type checking)๋ฅผ ํ†ต๊ณผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
tsconfig.json tsc ๋ช…๋ น์„ ๋Œ๋ฆด ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.
tslint.json ๋ฆฐํ„ฐ(Linter)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.

์ด ํŒŒ์ผ๋“ค์€, npm โ‰ฅ 5.2.0 ์—์„œ๋Š” npx dts-gen --dt --name my-package-name --template module ๋ช…๋ น์œผ๋กœ, ๊ทธ ์ดํ•˜ ๊ฒฝ์šฐ์—๋Š” npm install -g dts-gen ์™€ dts-gen --dt --name my-package-name --template module ๋ช…๋ น์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. dts-gen ์˜ ๋ชจ๋“  ์˜ต์…˜(Option)์„ ๋ณด๊ณ ์‹ถ์œผ์‹œ๋ฉด dts-gen ์ €์žฅ์†Œ๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€์— ์ƒˆ ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, async ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด "target" ์„ "es6" ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜, "lib" ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, jsx ์ง€์›์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ tsconfig.json ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Definitely Typed ์˜ ๊ด€๋ฆฌ์ž๋“ค์ด ์ฃผ๊ธฐ์ ์œผ๋กœ ์ƒˆ๋กœ์šด ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋“ค์„ ํ™•์ธํ•˜๊ธฐ๋Š” ํ•˜์ง€๋งŒ, ๋‹ค๋ฅธ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๊ฐ€ ๋งŽ์„ ๊ฒฝ์šฐ ํ™•์ธ์ด ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ์•„์ฃผ์„ธ์š”.

base64-js ํŒจํ‚ค์ง€๋Š” ์ข‹์€ ์˜ˆ์‹œ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

๋งŽ์ด ์ €์ง€๋ฅด๋Š” ์‹ค์ˆ˜๋“ค

  • ์šฐ์„ , ์•ˆ๋‚ด์„œ(Handbook)์— ๋‚˜์™€์žˆ๋Š” ๋‚ด์šฉ๋“ค์„ ๋”ฐ๋ผ์ฃผ์„ธ์š”.
  • ์ฝ”๋“œ์—์„œ๋Š” ๋ชจ๋“  ๊ณณ์—์„œ ํƒญ(Tab)์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, ํ•ญ์ƒ 4 ๊ฐœ์˜ ๋„์–ด์“ฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.
  • function sum(nums: number[]): number์˜ ๊ฒฝ์šฐ, ๋งŒ์•ฝ ํ•จ์ˆ˜๊ฐ€ ์ธ์ž๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ReadonlyArray ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.
  • interface Foo { new(): Foo; }์˜ ๊ฒฝ์šฐ, ์ด๋Ÿฐ ์„ ์–ธ์€ ์ด ํ˜•(Type)์„ ๊ฐ€์ง„ ๊ฐ์ฒด(Object)์— new ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋งŽ์€ ๊ฒฝ์šฐ ์—ฌ๋Ÿฌ๋ถ„์€ declare class Foo { constructor(); } ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋Š” ๊ฒƒ์ผ ๊ฒ๋‹ˆ๋‹ค.
  • const Class: { new(): IClass; }์˜ ๊ฒฝ์šฐ, new ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์ˆ˜๋ฅผ ๋งŒ๋“œ๋Š” ๋Œ€์‹ , class Class { constructor(); } ์™€ ๊ฐ™์ด ํด๋ž˜์Šค ์„ ์–ธ(Class declaration)์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋” ์ข‹์Šต๋‹ˆ๋‹ค.
  • getMeAT<T>(): T์˜ ๊ฒฝ์šฐ, ๋งŒ์ผ ์ž๋ฃŒํ˜• ๋งค๊ฐœ๋ณ€์ˆ˜(Type parameter)๊ฐ€ ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ๋“ฑ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ๊ทธ๋Ÿฐ ์ œ๋„ˆ๋ฆญ(Generic) ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ ์ œ๋„ˆ๋ฆญ(Generic) ํ•จ์ˆ˜๋Š” ๋‹จ์ˆœํžˆ ์ž๋ฃŒํ˜• ๋‹จ์–ธ(Type assertion)์„ ์œ„์žฅ์‹œํ‚จ ๊ฒƒ๋ฟ์ž…๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ getMeAT() as number ์™€ ๊ฐ™์ด ์ง„์งœ ์ž๋ฃŒํ˜• ๋‹จ์–ธ(Type assertion) ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋” ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๊ดœ์ฐฎ์€ ์ œ๋„ˆ๋ฆญ(Generic)์˜ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. function id<T>(value: T): T;. ๋‹ค์Œ์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ์ œ๋„ˆ๋ฆญ(Generic)์˜ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. function parseJson<T>(json: string): T;. ์˜ˆ์™ธ์ ์œผ๋กœ, new Map<string, number>() ์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.
  • Function ์ด๋‚˜ Object ์™€ ๊ฐ™์€ ํ˜•(Type)์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ต๋‹ˆ๋‹ค. 99% ์˜ ๊ฒฝ์šฐ ๋” ๊ตฌ์ฒด์ ์ธ ํ˜•(Type)์„ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜(Function) ๋ฅผ ์œ„ํ•ด์„œ๋Š” (x: number) => number ์™€ ๊ฐ™์€, ๊ฐ์ฒด๋ฅผ ์œ„ํ•ด์„œ๋Š” { x: number, y: number } ์™€ ๊ฐ™์€ ํ˜•(Type)๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜•(Type)์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ์ „ํ˜€ ์—†์„ ๊ฒฝ์šฐ์—๋Š”, Object ํ˜•(Type)์ด ์•„๋‹ˆ๋ผ any ํ˜•(Type)์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์ผ ์–ด๋–ค ํ˜•(Type)์ด ๊ฐ์ฒด๋ผ๋Š” ์‚ฌ์‹ค๋งŒ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ, Object ๋‚˜ { [key: string]: any } ๊ฐ€ ์•„๋‹ˆ๋ผ object ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.
  • var foo: string | any์˜ ๊ฒฝ์šฐ, any ๊ฐ€ ํ•ฉ ์ž๋ฃŒํ˜•(Union type)์˜ ์•ˆ์—์„œ ์‚ฌ์šฉ๋  ๊ฒฝ์šฐ, ๊ฒฐ๊ณผ ํ˜•(Type)์€ ์–ธ์ œ๋‚˜ any ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ˜•(Type)์˜ string ๋ถ€๋ถ„์ด ์œ ์šฉํ•ด ๋ณด์ธ๋‹ค ํ•˜๋”๋ผ๋„, ์‚ฌ์‹ค์€ ์ž๋ฃŒํ˜• ๊ฒ€์‚ฌ(Type checking)์˜ ์ธก๋ฉด์—์„œ any ์™€ ๋‹ค๋ฅธ ๊ฒƒ์ด ์—†์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ , any, string, ๋‚˜ string | object ์ค‘ ํ•˜๋‚˜๋ฅผ ํ•„์š”์— ๋งž๊ฒŒ ๊ณจ๋ผ์„œ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.

ํŒจํ‚ค์ง€ ์‚ญ์ œํ•˜๊ธฐ

ํŒจํ‚ค์ง€๊ฐ€ ์Šค์Šค๋กœ์˜ ํ˜•(Type)์„ ํฌํ•จํ•˜๊ฒŒ ๋˜๋ฉด, Definitely Typed ์— ์žˆ๋Š” ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ์‚ญ์ œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

npm run not-needed -- typingsPackageName asOfVersion sourceRepoURL [libraryName] ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • typingsPackageName ๋Š” ์‚ญ์ œํ•  ๋””๋ ‰ํ† ๋ฆฌ์˜ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.
  • asOfVersion ๋Š” ์ƒˆ ์Šคํ…(Stub) ์šฉ @types/foo ๋ฅผ ํผ๋ธ”๋ฆฌ์‹œ(Publish)ํ•  ๋ฒ„์ „์ž…๋‹ˆ๋‹ค. ์ด ๋ฒ„์ „์€ ํ˜„์žฌ NPM ์— ์˜ฌ๋ผ๊ฐ„ ๋ฒ„์ „๋ณด๋‹ค ๋” ๋†’์€ ๋ฒ„์ „์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • sourceRepoURL ๋Š” ์ž๋ฃŒํ˜•(Typing)์„ ํฌํ•จํ•˜๊ฒŒ ๋œ ์ €์žฅ์†Œ์˜ ์ฃผ์†Œ์ž…๋‹ˆ๋‹ค.
  • libraryName ๋Š” ํŒจํ‚ค์ง€์˜ ์ด๋ฆ„์„ ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ์“ด ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฆ‰, "angular2" ๋Œ€์‹ ์— "Angular 2" ์™€ ๊ฐ™์ด ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. (์ƒ๋žตํ–ˆ์„ ๊ฒฝ์šฐ์—๋Š” "typingsPackageName" ์™€ ๊ฐ™์€ ๊ฒƒ์œผ๋กœ ์ทจ๊ธ‰๋ฉ๋‹ˆ๋‹ค.)

Definitely Typed ์˜ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€๋“ค์ด ์‚ญ์ œ๋œ ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์„ ๊ฒฝ์šฐ, ํ˜•(Type)์„ ํฌํ•จํ•˜๊ธฐ ์‹œ์ž‘ํ•œ ์›๋ž˜ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ์ˆ˜์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์‚ญ์ œ๋œ ์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ Definitely Typed ํŒจํ‚ค์ง€๋“ค์˜ package.json ํŒŒ์ผ์— "dependencies": { "foo": "x.y.z" } ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Definitely Typed ์— ํ•œ ๋ฒˆ๋„ ์˜ฌ๋ผ์˜จ ์  ์—†๋Š” ํŒจํ‚ค์ง€๊ฐ€ ํ˜•(Type)์„ ํฌํ•จํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค๋ฉด, notNeededPackages.json ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•  ํ•„์š”๋„ ์—†์Šต๋‹ˆ๋‹ค.

๋ฆฐํ„ฐ

์ž๋ฃŒํ˜•(Typing) ํŒจํ‚ค์ง€๋ฅผ ๋ฆฐํŠธ(Lint)ํ•˜๋ ค๋ฉด, ํŒจํ‚ค์ง€ ๋””๋ ‰ํ† ๋ฆฌ์— { "extends": "dtslint/dt.json" } ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” tslint.json ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์ƒˆ ํŒจํ‚ค์ง€๋Š” ํ•ด๋‹น ํŒŒ์ผ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ณ ์ณ์•ผ ํ•˜์ง€๋งŒ ์•„์ง ๊ณ ์ณ์ง€์ง€ ์•Š์€ ๋ฆฐํŠธ(Lint) ๊ฒฐ๊ณผ๊ฐ€ ์žˆ์„ ๋•Œ์—๋งŒ tslint.json ์—์„œ ๋ฆฐํŠธ ๊ทœ์น™(Lint rule)์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด,

{
    "extends": "dtslint/dt.json",
    "rules": {
        // ์ด ํŒจํ‚ค์ง€๋Š” Function ํ˜•์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ณ ์น˜๋Š” ๊ฒŒ ์‰ฝ์ง€ ์•Š๋‹ค.
        "ban-types": false
    }
}

(๋ฆฐํŠธ ๊ทœ์น™(Lint rule)์ด ์ ˆ๋Œ€๋กœ ์ ์šฉ๋˜์„œ๋Š” ์•ˆ๋˜๋Š” ๊ฒฝ์šฐ์—๋Š”, // tslint:disable rule-name ๋‚˜ //tslint:disable-next-line rule-name ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ํ›„์ž๊ฐ€ ๋” ๋‚˜์€ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.)

์–ด๋–ค ํ‘œํ˜„์‹(Expression)์ด ํŠน์ •ํ•œ ํ˜•(Type)์„ ๊ฐ€์ง„๋‹ค๊ณ  ๋‹จ์–ธ(Assert)ํ•˜๊ณ  ์‹ถ์„ ๋•Œ์—๋Š” $ExpectType ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์–ด๋–ค ํ‘œํ˜„์‹(Expression)์ด ์ปดํŒŒ์ผ์— ์‹คํŒจํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” $ExpectError ๋ฅผ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

// $ExpectType void
f(1);

// $ExpectError
f("one");

dtslint ์ €์žฅ์†Œ์˜ README ํŒŒ์ผ์—์„œ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒ€์ฆํ•˜๊ธฐ

npm run lint package-name ๋ช…๋ น์„ ํ†ตํ•ด ๋ณ€๊ฒฝ์ ์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋•Œ, package-name์€ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์‹ถ์€ ํŒจํ‚ค์ง€์˜ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

์ž‘์„ฑํ•œ dts ํŒŒ์ผ์„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋กœ ๋Œ๋ ค๋ณด๊ธฐ ์œ„ํ•ด ํ…Œ์ŠคํŠธ ์Šคํฌ๋ฆฝํŠธ ๋‚ด๋ถ€์ ์œผ๋กœ dtslint๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ž์ฃผ ํ•˜๋Š” ์งˆ๋ฌธ๋“ค

์ด ์ €์žฅ์†Œ์™€ @types ํŒจํ‚ค์ง€๋“ค์ด ๋Œ€์ฒด ๋ฌด์Šจ ๊ด€๊ณ„๊ฐ€ ์žˆ๋Š” ๊ฑด๊ฐ€์š”?

master ๋ธŒ๋žœ์น˜(Branch)์˜ ๋‚ด์šฉ๋“ค์ด types-publisher ๋ฅผ ์‚ฌ์šฉํ•ด ์ž๋™์œผ๋กœ @types ํผ๋ธ”๋ฆฌ์‹œ(Publish)๋ฉ๋‹ˆ๋‹ค.

ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋ฅผ ์ œ์ถœํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒŒ ํ•ฉ์ณ์งˆ ๋•Œ๊นŒ์ง€ ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆฌ๋‚˜์š”?

์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„์˜ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋“ค์€ ์ผ์ฃผ์ผ ์•ˆ์— ํ•ฉ์ณ์ง‘๋‹ˆ๋‹ค. ๋จธ๋ฆฟ์ฃผ์„์— ์žˆ๋Š” ์ €์ž ์ค‘ ํ•œ๋ช…์— ์˜ํ•ด ์Šน์ธ๋œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋Š” ๋ณดํ†ต ๋” ๋นจ๋ฆฌ ํ•ฉ์ณ์ง‘๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋Š” ๊ด€๋ฆฌ์ž์˜ ์„ธ์„ธํ•œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ•„์š”๋กœ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ฐ PR ๋“ค์€ ํ•ฉ์ณ์ง€๊ธฐ ์ „์— TypeScript or Definitely Typed ํŒ€ ๊ตฌ์„ฑ์›์˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•„์•ผ ํ•˜๋ฉฐ, ์ด๋Š” ์‚ฌ๋žŒ์ด ํ•˜๋Š” ์ผ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋Š๋ ค์งˆ ์ˆ˜๋„ ์žˆ์œผ๋‹ˆ ์–‘ํ•ด๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ํ’€ ๋ฆฌํ€˜์ŠคํŠธ ๋ฒˆ๋‹ค์šด ๋ณด๋“œ(New Pull Request Status Board)์—์„œ ์—ด๋ฆฐ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ์— ๋Œ€ํ•œ ๊ด€๋ฆฌ์ž๋“ค์˜ ์ง„ํ–‰๋„๋ฅผ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋Š” ํ•ฉ์ณ์กŒ์Šต๋‹ˆ๋‹ค. ์–ธ์ œ NPM ์— @types ํŒจํ‚ค์ง€๊ฐ€ ๊ฐฑ์‹ ๋˜๋‚˜์š”?

NPM ์˜ ํŒจํ‚ค์ง€๋“ค์€ ์ˆ˜์‹œ๊ฐ„ ์•ˆ์— ๊ฐฑ์‹ ๋  ๊ฒ๋‹ˆ๋‹ค. ๋งŒ์•ฝ 24 ์‹œ๊ฐ„์ด ์ง€๋‚˜๋„ ๊ฐฑ์‹ ๋˜์ง€ ์•Š์œผ๋ฉด, ๋ฌธ์ œ๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•ด @RyanCavanaugh ๋‚˜ @andy-ms ๋ฅผ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)์—์„œ ํ˜ธ์ถœํ•ด์ฃผ์„ธ์š”.

๋‹ค๋ฅธ ์ž๋ฃŒํ˜• ์ •์˜(Type definition)์— ์˜์กดํ•˜๋Š” ์ž๋ฃŒํ˜• ์ •์˜(Type definition)์„ ๋งŒ๋“ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. <reference types="" /> ์™€ ์ž„ํฌํŠธ(import) ์ค‘ ๋ฌด์—‡์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋‚˜์š”?

์™ธ๋ถ€ ๋ชจ๋“ˆ(export ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ)์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์ž„ํฌํŠธ(import)๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”. ํ™˜๊ฒฝ๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“ˆ(ambient module)(declare module ๋ฅผ ์“ฐ๊ฑฐ๋‚˜ ์ „์—ญ ๋ณ€์ˆ˜๋“ค์„ ์„ ์–ธํ•œ ๋ชจ๋“ˆ)์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, <reference types="" /> ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.

package.json ํŒŒ์ผ์ด ๊ฐ€๋” ๋ณด์ด๋˜๋ฐ?

์ผ๋ฐ˜์ ์œผ๋กœ๋Š” package.json ํŒŒ์ผ์„ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€๊ฐ€ ํผ๋ธ”๋ฆฌ์‹œ(Publish)๋  ๋•Œ ํŒจํ‚ค์ง€๋ฅผ ์œ„ํ•œ package.json ํŒŒ์ผ์€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๊ฐ€๋” ๋ณด์ด๋Š” package.json ํŒŒ์ผ์€ ์˜์กดํ•˜๋Š” ๊ฒƒ๋“ค์„ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ๋ฅผ ํ•œ ๋ฒˆ ๋ณด์„ธ์š”. ์˜์กด์„ฑ์„ ์ œ์™ธํ•œ ๋‹ค๋ฅธ ํ•„๋“œ(Field)๋“ค, ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ "description" ๊ฐ™์€ ๊ฒƒ๋“ค์€ ์‚ฌ์šฉํ•ด์„œ๋Š” ์•ˆ๋ฉ๋‹ˆ๋‹ค. ์˜›๋‚  @types ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹ค ๊ฒฝ์šฐ์—๋„ "dependencies": { "@types/foo": "x.y.z" } ์™€ ๊ฐ™์€ ๋‚ด์šฉ์„ package.json ํŒŒ์ผ์— ๋„ฃ์œผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ํŒจํ‚ค์ง€๋“ค์— tslint.json ์ด ์—†๊ฑฐ๋‚˜, tsconfig.json ์— "noImplicitAny": true, "noImplicitThis": true, ๋‚˜ "strictNullChecks": true ๊ฐ€ ์—†์–ด์š”.

๊ทธ๋Ÿผ ๊ทธ ํŒจํ‚ค์ง€๋“ค์ด ์ž˜๋ชป๋œ ๊ฒ๋‹ˆ๋‹ค. ๊ณ ์ณ์„œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull request)๋ฅผ ์ œ์ถœํ•ด์ฃผ์‹œ๋ฉด ๊ณ ๋ง™๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฃŒํ˜• ์ •์˜(Type definition)์„ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

์ด๋ฏธ ์š”์ฒญ๋œ ์ž๋ฃŒํ˜• ์ •์˜(Type definition)๋“ค์„ ์—ฌ๊ธฐ์„œ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

DOM ์„ ์œ„ํ•œ ์ž๋ฃŒํ˜• ์ •์˜(Type definitions)๋Š”์š”?

์›น ํ‘œ์ค€(Web standard)๊ณผ ๊ด€๋ จ์ด ์žˆ๋Š” ์ž๋ฃŒํ˜•(Typing)๋“ค์€ TSJS-lib-generator ์ €์žฅ์†Œ์— ๊ธฐ์—ฌํ•ด์„œ ๊ณ ์น˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ ์ณ์ง„ ์ž๋ฃŒํ˜•(Typing)์€ lib.dom.d.ts ํŒŒ์ผ์— ํฌํ•จ๋  ๊ฒ๋‹ˆ๋‹ค.

์–ด๋–ค ํŒจํ‚ค์ง€๊ฐ€ export = ๋ฅผ ์“ฐ๊ณ  ์žˆ๋Š”๋ฐ, ์ €๋Š” ๋””ํดํŠธ ์ž„ํฌํŠธ(Default import)๊ฐ€ ๋” ์ข‹์Šต๋‹ˆ๋‹ค. export = ๋ฅผ export default ๋กœ ๋ฐ”๊ฟ”๋„ ๋˜๋‚˜์š”?

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript) 2.7 ์ด์ƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ๊ณ„์‹œ๋ฉด ํ”„๋กœ์ ํŠธ ์•ˆ์—์„œ --esModuleInterop ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”. ๊ทธ ์ดํ•˜์˜ ๊ฒฝ์šฐ, ๋””ํดํŠธ ์ž„ํฌํŠธ(Default import)๊ฐ€ ๋™์ž‘ํ•˜๋Š” ํ™˜๊ฒฝ(Webpack, SystemJS, esm)์—์„œ ์ž‘์—… ์ค‘์ด์‹œ๋ฉด --allowSyntheticDefaultImports ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฑธ ๊ณ ๋ คํ•ด๋ณด์„ธ์š”. ์ž๋ฃŒํ˜• ์ •์˜(Type definition)๊ฐ€ ๋งž๋Š” ๊ฒฝ์šฐ์—๋Š” ์ž๋ฃŒํ˜• ์ •์˜(Type definition)์„ ์ˆ˜์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. NPM ํŒจํ‚ค์ง€์˜ ๊ฒฝ์šฐ, node -p 'require("foo")' ๊ฐ€ ์›ํ•˜๋Š” ๊ฐ’์ด๋ผ๋ฉด export = ์ด ๋งž๊ณ , node -p 'require("foo").default' ์ด ์›ํ•˜๋Š” ๊ฐ’์ด๋ผ๋ฉด export default ์ด ๋งž์Šต๋‹ˆ๋‹ค.

์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript) 3.1 ์ด์ƒ์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ •์˜(Definition) ๋จธ๋ฆฟ์ฃผ์„(// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped) ๋’ค์— // TypeScript Version: 3.1 ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript)์— ๊ธฐ๋ณธ์œผ๋กœ ํฌํ•จ๋˜์ง€ ์•Š์€ DOM API ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์–ด์š”.

TSJS-Lib-Generator ์ €์žฅ์†Œ๊ฐ€ ๊ด€๋ จ๋˜์–ด์žˆ์„ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์ €์žฅ์†Œ์˜ ์•ˆ๋‚ด๋ฅผ ๋”ฐ๋ผ์ฃผ์„ธ์š”. ํ•ด๋‹น ํ‘œ์ค€์ด ์•„์ง ์ดˆ์•ˆ์ธ ์ƒํƒœ๋ผ๋ฉด, ์ด ์ €์žฅ์†Œ์™€ ๊ด€๋ จ๋œ ์ผ์ž…๋‹ˆ๋‹ค. dom- ์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“œ์‹  ๋’ค, "Project" ๋จธ๋ฆฟ์ฃผ์„ ๋ถ€๋ถ„์— ํ•ด๋‹น ํ‘œ์ค€์˜ ๋งํฌ๋ฅผ ์จ ์ฃผ์„ธ์š”. ๋‹ค๋งŒ ํ‘œ์ค€์ด ์ดˆ์•ˆ์„ ๋ฒ—์–ด๋‚˜๋ฉด Definitely Typed ์—์„œ ์‚ญ์ œ๋˜๊ณ  @types ํŒจํ‚ค์ง€๊ฐ€ ์ง€์›์ด ์ค‘๋‹จ๋œ(Deprecated) ๊ฒƒ์œผ๋กœ ํ‘œ์‹œ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŒจํ‚ค์ง€๋ฅผ ์ƒˆ ๋ฉ”์ด์ € ๋ฒ„์ „(major version)์— ๋งž๊ฒŒ ๊ฐฑ์‹ ํ•˜๊ณ  ์‹ถ์–ด์š”.

์˜›๋‚  ๋ฒ„์ „๋„ ๊ณ„์†ํ•ด์„œ ์ˆ˜์ •ํ•  ์˜ˆ์ •์ด๋ผ๋ฉด, ์ด์ „ ๋ฒ„์ „์— ํ•ด๋‹นํ•˜๋Š” ์ƒˆ ๋””๋ ‰ํ† ๋ฆฌ(์˜ˆ๋ฅผ ๋“ค์–ด 2. ๋ฒ„์ „์„ ์œ„ํ•ด์„œ๋Š” v2)๋ฅผ ๋งŒ๋“ค๊ณ  ํ˜„์žฌ ํŒŒ์ผ๋“ค์„ ๊ทธ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์˜ฎ๊ฒจ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์˜ฎ๊ธด ๋’ค์—๋Š”

  1. tsconfig.json ์™€ tslint.json ์— ํฌํ•จ๋œ ์ƒ๋Œ€๊ฒฝ๋กœ๋“ค์„ ์ˆ˜์ •ํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์„ ์ถ”๊ฐ€ํ•˜์—ฌ ํ…Œ์ŠคํŠธ๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ ๋ฒ„์ „์„ ๊ฒ€์‚ฌํ•˜๋„๋ก ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, history ํŒจํ‚ค์ง€์˜ 2 ๋ฒ„์ „์˜ tsconfig.json ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

{
    "compilerOptions": {
        "baseUrl": "../../",
        "typeRoots": ["../../"],
        "paths": {
            "history": [ "history/v2" ]
        },
    },
    "files": [
        "index.d.ts",
        "history-tests.ts"
    ]
}

์ˆ˜์ • ์ค‘์ธ ํŒจํ‚ค์ง€์— ์˜์กดํ•˜๋Š” Definitely Typed ์˜ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€๋“ค์ด ์ƒˆ ๋ฒ„์ „๊ณผ ํ˜ธํ™˜๋˜์ง€ ์•Š์„ ๊ฒฝ์šฐ, ๊ทธ ํŒจํ‚ค์ง€๋“ค์—๋„ ์˜›๋‚  ๋ฒ„์ „์œผ๋กœ์˜ ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์„ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜์ • ์ค‘์ธ ํŒจํ‚ค์ง€์— ์˜์กดํ•˜๋Š” ํŒจํ‚ค์ง€์— ์˜์กดํ•˜๋Š” ํŒจํ‚ค์ง€๋“ค์—๋„ ๋˜‘๊ฐ™์€ ์ž‘์—…์„ ํ•ด ์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, react-router ํŒจํ‚ค์ง€๋Š” history@2 ํŒจํ‚ค์ง€์— ์˜์กดํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, react-router ํŒจํ‚ค์ง€์˜ tsconfig.json ํŒŒ์ผ์ด "history": [ "history/v2" ] ์™€ ๊ฐ™์€ ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์–ด์„œ (react-router ํŒจํ‚ค์ง€์— ์˜์กดํ•˜๋Š” ํŒจํ‚ค์ง€์ธ) react-router-bootstrap ๋˜ํ•œ tsconfig.json ํŒŒ์ผ ์•ˆ์— ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

/// <reference types=".." /> ์—์„œ๋Š” ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์ด ๋™์ž‘ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, Definitely Typed ํŒจํ‚ค์ง€๋กœ์— ์˜์กดํ•  ๋•Œ์—๋Š” ์ž„ํฌํŠธ(import) ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ „์—ญ์ ์œผ๋กœ๋„ ๋ชจ๋“ˆ๋กœ๋„ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ํŒจํ‚ค์ง€์˜ ์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์€ ์–ด๋–ป๊ฒŒ ์“ฐ๋‚˜์š”?

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์•ˆ๋‚ด์„œ(TypeScript Handbook)์€ ์„ ์–ธ(Declaration)์„ ์“ฐ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ •๋ณด์™€ ์˜ˆ์‹œ๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋‚ด์šฉ์—๋Š” ES6 ์‹์˜ ๋ชจ๋“ˆ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฐ์ฒด๋ฅผ ์ „์—ญ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. big.js ํŒจํ‚ค์ง€์˜ ์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์ด ์‹ค๋ก€์ž…๋‹ˆ๋‹ค. ์ด ํŒจํ‚ค์ง€๋Š” ์›น ํŽ˜์ด์ง€์˜ ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋˜ํ•œ ES6 ์‹์˜ ์ž„ํฌํŠธ(Import) ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„์˜ ํŒจํ‚ค์ง€๊ฐ€ ์ž„ํฌํŠธ(Import) ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์™€ ์ „์—ญ์ ์œผ๋กœ ๋ถˆ๋ €์„ ๋•Œ๋ฅผ ํ…Œ์ŠคํŠธ ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด, test ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  YourLibraryName-global.test.ts ๊ทธ๋ฆฌ๊ณ  YourLibraryName-module.test.ts ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ํ…Œ์ŠคํŠธ ํŒŒ์ผ ๋‘ ๊ฐœ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”. ์ „์—ญ(Global) ํ…Œ์ŠคํŠธ ํŒŒ์ผ์€ ์›น ํŽ˜์ด์ง€์—์„œ ์ „์—ญ์ ์œผ๋กœ ์‚ฌ์šฉ๋  ๋•Œ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. ์ด ํŒŒ์ผ์—์„œ๋Š” ์ž„ํฌํŠธ(Import) ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“ˆ(Module) ํ…Œ์ŠคํŠธ ํŒŒ์ผ์€ ์ž„ํฌํŠธ(Import) ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•  ๋•Œ๋ฅผ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์—ฌ๋Ÿฌ๋ถ„์˜ tsconfig.json ํŒŒ์ผ์ด files ํ•„๋“œ(Field)๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด, ์ด ํ•„๋“œ(Field)๋Š” ๋ฐ˜๋“œ์‹œ ๋‘ ํ…Œ์ŠคํŠธ ํŒŒ์ผ์„ ๋ชจ๋‘ ํฌํ•จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ์‹ค๋ก€ ๋˜ํ•œ big.js ํŒจํ‚ค์ง€์˜ ์ž๋ฃŒํ˜• ์„ ์–ธ(Type declaration)์—์„œ ํ™•์ธํ•ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ๊ฐ์˜ ํ…Œ์ŠคํŠธ ํŒŒ์ผ์— ๋ชจ๋“  ์ƒํ™ฉ์„ ํ…Œ์ŠคํŠธํ•  ํ•„์š”๋Š” ์—†๋‹ค๋Š” ๊ฑธ ์žŠ์ง€๋งˆ์„ธ์š”. ์ „์—ญ ํ…Œ์ŠคํŠธ ํŒŒ์ผ์—์„œ๋Š” ์ „์—ญ์ ์œผ๋กœ ์‚ฌ์šฉ๋  ๋•Œ๋งŒ ํ…Œ์ŠคํŠธํ•˜๊ณ , ๋ชจ๋“ˆ ํ…Œ์ŠคํŠธ ํŒŒ์ผ์—์„œ ๋‚˜๋จธ์ง€ ์ƒํ™ฉ๋“ค์„ ๋ชจ๋‘ ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ทธ ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

์ง€์—ญ ํŒจํ‚ค์ง€(Scoped package)์˜ ๊ฒฝ์šฐ๋Š” ์–ด๋–ป๊ฒŒ ํ•˜์ฃ ?

@foo/bar ํŒจํ‚ค์ง€์™€ ๊ฐ™์€ ์ง€์—ญ ํŒจํ‚ค์ง€(Scoped package)๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜• ํŒจํ‚ค์ง€(Type package)๋Š” types/foo__bar ๋””๋ ‰ํ† ๋ฆฌ์— ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋ฐ‘์ค„ ๋ฌธ์ž๊ฐ€ ๋‘ ๋ฒˆ ์žˆ๋Š” ๊ฒƒ์— ์ฃผ์˜ํ•˜์„ธ์š”.

์ง€์—ญ ํŒจํ‚ค์ง€(Scoped package)๋ฅผ ์œ„ํ•œ ์ž๋ฃŒํ˜• ํŒจํ‚ค์ง€(Type package)๋ฅผ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด dts-gen ๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ์—๋Š”, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ์„ฑ๋œ tsconfig.json ์•ˆ์— ์ง€์—ญ ํŒจํ‚ค์ง€(Scoped package)๋ฅผ ์œ„ํ•œ ์ ์ ˆํ•œ ๊ฒฝ๋กœ ๋Œ€์‘ ๊ทœ์น™(Path mapping rule)์„ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

{
    "paths":{
      "@foo/bar": ["foo__bar"]
    }
}

๊นƒํ—™(GitHub)์ด ๋ณด์—ฌ์ฃผ๋Š” ํŒŒ์ผ ํžˆ์Šคํ† ๋ฆฌ(History)๊ฐ€ ๋ถˆ์™„์ „ํ•ด์š”.

๊นƒํ—™์€ ์ด๋ฆ„์ด ๋ฐ”๋€ ํŒŒ์ผ์˜ ํžˆ์Šคํ† ๋ฆฌ(History)๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  git log --follow ๋ช…๋ น์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

ES6 ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ž„ํฌํŠธ(Import)๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋“ˆ์„ ์ต์ŠคํฌํŠธ(Export)ํ•˜์ง€ ์•Š๋Š” ํŒจํ‚ค์ง€๋“ค์— ๋นˆ ์ด๋ฆ„๊ณต๊ฐ„์„ ์ถ”๊ฐ€ํ•ด์•ผ ํ•˜๋‚˜์š”?

chai-http ํŒจํ‚ค์ง€์™€ ๊ฐ™์€ ๋ช‡๋ช‡ ํŒจํ‚ค์ง€๋“ค์€ ํ•จ์ˆ˜๋ฅผ ์ต์ŠคํฌํŠธ(Export)ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ํŒจํ‚ค์ง€๋“ค์„ import * as foo from "foo"; ์™€ ๊ฐ™์ด ์ž„ํฌํŠธ(Import)ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

error TS2497: Module 'foo' resolves to a non-module entity and cannot be imported using this construct

์ด ์˜ค๋ฅ˜๋Š” ํ•จ์ˆ˜์˜ ์ด๋ฆ„๊ณผ ๋˜‘๊ฐ™์€ ๋นˆ ์ด๋ฆ„๊ณต๊ฐ„(Namespace)์„ ์ •์˜ํ•ด์„œ ์—†์•จ ์ˆ˜ ์žˆ์œผ๋‚˜, ์ข‹์€ ๋ฐฉ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค. ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ(Stack Overflow)์˜ ์ด ์งˆ๋ฌธ์˜ ๋‹ต๋ณ€์ด ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จ๋˜์–ด ์ž์ฃผ ์–ธ๊ธ‰๋ฉ๋‹ˆ๋‹ค.

import foo = require("foo"); ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“ˆ์„ ์ž„ํฌํŠธ(Import)ํ•˜๊ฑฐ๋‚˜, ํ™˜๊ฒฝ์—์„œ ES6 ๋ชจ๋“ˆ ๋ณ€ํ™˜(Module interop)์„ ์ง€์›ํ•œ๋‹ค๋ฉด --allowSyntheticDefaultImports ์™€ ํ•จ๊ป˜ import foo from "foo"; ๊ฐ™์€ ๋””ํดํŠธ ์ž„ํฌํŠธ(Default import)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

๋ผ์ด์„ผ์Šค

์ด ํ”„๋กœ์ ํŠธ๋Š” MIT license ๊ฐ€ ์ ์šฉ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ ์ž๋ฃŒํ˜• ์ •์˜(Type definition) ํŒŒ์ผ๋“ค์˜ ์ €์ž‘๊ถŒ์€ ๊ฐ ๊ธฐ์—ฌ์ž๋“ค์—๊ฒŒ ์žˆ์œผ๋ฉฐ, ๊ธฐ์—ฌ์ž๋“ค์€ ํ•ด๋‹น ์ž๋ฃŒํ˜• ์ •์˜(Type definition) ํŒŒ์ผ๋“ค์˜ ๋งจ ์œ„์— ๋‚˜์—ด๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.