์ด ๊ฐ์ด๋๋ฅผ ๋ฐ๋ผ ์ ์ธ ํ์ผ์ ์์ฑํ์ผ๋ฏ๋ก, ์ด์ npm์ ๋ฐฐํฌํ ์๊ฐ์ ๋๋ค. npm์ ์ ์ธ ํ์ผ์ ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ํฌ๊ฒ ๋ ๊ฐ์ง๊ฐ ์์ต๋๋ค:
- npm ํจํค์ง๋ก ๋ฒ๋ค๋งํ๊ฑฐ๋
- npm์ @types organization์ ๋ฐฐํฌํ๊ธฐ
๋ง์ฝ ํจํค์ง๊ฐ TypeScript๋ก ์์ฑ๋์๋ค๋ฉด ์ฒซ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
--declaration ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ ํ์ผ์ ์์ฑํ์ธ์.
์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด, ์ ์ธ๊ณผ JavaScript๊ฐ ํญ์ ์ผ์นํ๊ฒ ๋ฉ๋๋ค.
๋ง์ฝ ํจํค์ง๊ฐ TypeScript๋ก ์์ฑ๋์ง ์์๋ค๋ฉด ๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋ง์ฝ ํจํค์ง๊ฐ ๋ฉ์ธ .js ํ์ผ์ ๊ฐ์ง๊ณ ์๋ค๋ฉด, ๋ฉ์ธ ์ ์ธ ํ์ผ์ package.json์๋ ํ์ํด์ผ ํฉ๋๋ค.
๋ฒ๋ค๋ง๋ ์ ์ธ ํ์ผ์ types ํ๋กํผํฐ๋ก ๊ฐ๋ฆฌํค๋๋ก ํ์ธ์.
์๋ฅผ ๋ค์ด:
{
"name": "awesome",
"author": "Vandelay Industries",
"version": "1.0.0",
"main": "./lib/main.js",
"types": "./lib/main.d.ts"
}"typings" ํ๋๋ "types"์ ๋์์ด์ด๊ธฐ ๋๋ฌธ์ ์ญ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ํ package.json์ด "files" ํ๋กํผํฐ๋ฅผ ํฌํจํ๊ณ ์์ผ๋ฉด "types" ํ๋กํผํฐ๋ ๋ฌด์๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ ๋ฉ์ธ ์ ์ธ ํ์ผ์ "files" ํ๋กํผํฐ์ ์ ๋ฌํด์ผ ํฉ๋๋ค.
๋ง์ฝ ๋ฉ์ธ ์ ์ธ ํ์ผ ์ด๋ฆ์ด index.d.ts์ด๊ณ ํจํค์ง์ ๋ฃจํธ์ ์์ผ๋ฉด (index.js ์์) "types" ํ๋กํผํฐ๋ฅผ ์ฐ์ง ์์๋ ๋์ง๋ง, ์ฐ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋ชจ๋ ์์กด์ฑ์ npm์ผ๋ก ๊ด๋ฆฌ๋ฉ๋๋ค.
์์กด์ฑ์ด ์๋ ๋ชจ๋ ์ ์ธ ํจํค์ง๊ฐ package.json์ "dependencies" ์น์
์์ ์๋ง๊ฒ ์์ฑ๋์ด ์๋์ง ํ์ธํ์ธ์.
์๋ฅผ ๋ค์ด, Browserify์ TypeScript๋ก ์์ฑ๋ ํจํค์ง๋ฅผ ์๊ฐํด๋ด
์๋ค.
{
"name": "browserify-typescript-extension",
"author": "Vandelay Industries",
"version": "1.0.0",
"main": "./lib/main.js",
"types": "./lib/main.d.ts",
"dependencies": {
"browserify": "latest",
"@types/browserify": "latest",
"typescript": "next"
}
}์ฌ๊ธฐ์์, ํจํค์ง๋ browserify์ typescript ํจํค์ง์ ์์กด์ฑ์ด ์์ต๋๋ค.
browserify๋ ์ ์ธ ํ์ผ์ด npm ํจํค์ง์ ํจ๊ป ๋ฒ๋ค๋ง ๋์ง ์๊ธฐ ๋๋ฌธ์, @types/browserify ์ ์ธ์ ์์กด์ฑ์ ์ถ๊ฐํด์ผ ํฉ๋๋ค.
๋ฐ๋ฉด์ typescript๋ ์ ์ธ ํ์ผ์ด ํจํค์ง๋๊ธฐ ๋๋ฌธ์, ๋ณ๋์ ์์กด์ฑ์ ์ถ๊ฐํ ํ์๊ฐ ์์ต๋๋ค.
์ด ํจํค์ง๋ browserify์ typescript ํจํค์ง์ ๊ฐ ์ ์ธ์ ๋
ธ์ถํ๊ธฐ ๋๋ฌธ์, browserify-typescript-extension ํจํค์ง๋ ์ด ์์กด์ฑ๋ค์ ๊ฐ์ ธ์ผ ํฉ๋๋ค.
์ด ์ด์ ๋ก, "devDependencies"๊ฐ ์๋๋ผ "dependencies"๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์๋ํ๋ฉด "devDependencies"๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ์ง์ ์ด ํจํค์ง๋ค์ ์ค์นํด์ผ ํ๊ธฐ ๋๋ฌธ์
๋๋ค.
๋ง์ฝ์ ๋จ์ง ๋ช
๋ น์ค ์ ํ๋ฆฌ์ผ์ด์
์ ์์ฑํ๊ณ ํจํค์ง๋ฅผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ฌ์ฉํ๊ธธ ๊ธฐ๋ํ์ง ์๋๋ค๋ฉด, devDependencies๋ฅผ ์ฌ์ฉํด๋ ๋ฉ๋๋ค.
์ ์ธ ํ์ผ์ /// <reference path="..." />๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์.
/// <reference path="../typescript/lib/typescriptServices.d.ts" />
....๋์ /// <reference types="..." />๋ฅผ ์ฌ์ฉํ์ธ์.
/// <reference types="typescript" />
....๋ ์์ธํ ๋ด์ฉ์ ์ํด ์์กด์ฑ ์ฌ์ฉํ๊ธฐ ์น์ ์ ๋ค์ ๋ณด์ญ์์ค.
๋ง์ฝ ํ์ ์ ์๊ฐ ๋ค๋ฅธ ํจํค์ง์ ์์กด์ ์ด๋ผ๋ฉด:
- ๊ฐ ํ์ผ์ ์ ์งํ๊ณ ๋ค๋ฅธ ํจํค์ง์ ํฉ์น์ง ๋ง์ธ์.
- ๋ํ ์์ฑํ ํจํค์ง์ ์ ์ธ์ ๋ณต์ฌํ์ง ๋ง์ธ์.
- ๋ง์ฝ npm ํ์ ์ ์ธ ํจํค์ง๊ฐ ์ ์ธ ํ์ผ์ ํจํค์งํ์ง ์๋๋ค๋ฉด, ํด๋น ํจํค์ง์ ์์กดํ์ธ์.
@types์์ ์๋ ํจํค์ง๋ค์ ํ์ -๋ฐฐํฌ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ DefinitelyTyped์์ ์๋์ผ๋ก ๋ฐฐํฌ๋์์ต๋๋ค. ์ ์ธ์ @types ํจํค์ง๋ก ๋ฐฐํฌํ๋ ค๋ฉด, https://github.com/DefinitelyTyped/DefinitelyTyped์ pull request๋ฅผ ์ ์ถํ์ธ์. ๊ธฐ์ฌ ์ง์นจ ํ์ด์ง์์ ๋ ์์ธํ ๋ด์ฉ์ ์ฐพ์ ์ ์์ต๋๋ค.