ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ superset์ด๋ค.
ํ๋ก๊ทธ๋๋ฐ์ธ์ด์ธ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ์ฒ๋ผ ์๊ฒผ๊ณ ์ปดํ์ผํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ์ด ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๊ฐ๊ณ ์์ง์์ ๋ฉ์ง ๊ท์น๋ค์ ๊ฐ๊ณ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ ๋ช ํ๊ฑด ์๊ฒฉํ ๊ท์น์ด ์๊ธฐ ๋๋ฌธ์ด๊ณ , ์ฌ์ฉํ๊ธฐ ์ฝ๊ณ , ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋ฐฉํฅ์ผ๋ก ์์ ํ๊ธฐ๋ ํธํ๊ธฐ ๋๋ฌธ์ด๋ค. ํ์ง๋ง ์ด๊ฑด ์ฅ์ ์ด์ ๋จ์ ์ด ๋๋ค.
๊ทธ๋์ ํ์ํ ๊ฒ์ด ํ์ ์คํฌ๋ฆฝํธ์ด๋ค
์ธ์ด๊ฐ ์์ธก๊ฐ์ผํ๊ณ , ์ฝ๊ธฐ ์ฌ์ด ์ฝ๋ ๋ฑ๋ฑ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
yarn์ ์ค์นํด์ผํ๋๋ฐ
'yarn'์(๋) ๋ด๋ถ ๋๋ ์ธ๋ถ ๋ช ๋ น, ์คํํ ์ ์๋ ํ๋ก๊ทธ๋จ, ๋๋ ๋ฐฐ์น ํ์ผ์ด ์๋๋๋ค.
์ด๋ฐ ์ค๋ฅ๊ฐ ๋ด๋ค.
์ด๋ ๊ฒ ๋ ๋ช ๋ น์ด๋ฅผ ์ฐจ๋ก๋๋ก ํฐ๋ฏธ๋์ ์ ๋ ฅํ๋ค.
npm install -g yarn
yarn global add typescript
๊ทธ๋ฆฌ๊ณ ํด๋์๋ tsconfig.json์ด๋ผ๋ ํ์ผ์ ๋ง๋ค์ด์ฃผ๊ณ typescript์๊ฒ ์ด๋ป๊ฒ javascipt๋ก ๋ณํํ๋์ง ์๋ ค์ฃผ๋ ๋ช๋ช ์ต์ ์ ์ค ๊ฒ์ด๋ค.
tsconfig.json
{
"compilerOptions":{
"module": "commonjs", // ๋ค์ํ ๊ฒ์ import, export ํ ์ ์๋๋ก
"target": "ES2015", // ์ด๋ค ๋ฒ์ ์ js๋ก ์ปดํ์ผ?
"sourceMap": true
},
// ์ด๋ค ํ์ผ๋ค์ด ์ปดํ์ผ ๊ณผ์ ์ ํฌํจ๋๋์ง
"include" : ["index.ts"],
"exclude": ["node_modules"]
}
typescript ์์
ํฐ๋ฏธ๋์ tsc๋ฅผ ์น๋ฉด tsํ์ผ์ ์๋ ์ฝ๋๋ฅผ ์ปดํ์ผํด์ filename.js๋ index.js.map์ ๋ง๋ค์ด์ค๋ค
tsc ๋ฅผ ์ผ์ ๋์๋ ์ค๋ฅ๊ฐ ๋์ ์๋์ฒ๋ผ ํฐ๋ฏธ๋์ ์ณค๋ค.
yarn add tsc
์ด๋ป๊ฒ ์ปดํ์ผ ๋ ์ง์ ๋ํ ๋ด์ฉ์ด๋ค.
tsconfig.json์ ๋ง๋ค๊ณ tsc ๋ช ๋ น์ด๋ฅผ ์คํํ๋ฐ.
tsc ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํด๋ ๋์ ์ yarn start๋ฅผ ์ฌ์ฉํ ๊ฒ์ด๋ค.
yarn start ๋ช ๋ น์ด๋ฅผ ์คํํ๋ฉด index.ts๋ฅผ ์ปดํ์ผํ๊ณ ์คํํ๊ณ ์ถ๋ค.
{
"dependencies": {
"tsc": "^2.0.3",
"typescript": "^4.5.2"
},
"scripts": {
"start": "node index.js",
"prestart": "tsc"
}
}
yarn start๋ฅผ ์ ๋ ฅํ๋ฉด node์์ index.js๊ฐ ์คํ๋๋ ๊ฒ์ด๋ค.
๊ธฐ์ตํด์ผํ ๊ฒ์ ๋จผ์ tsํ์ผ์ ์ปดํ์ผํด์ผํ๋ค.
prestart : tsc์์ typescript๋ฅผ ์ปดํ์ผํ ๊ฒ์ด๋ค.
yarn start๋ฅผ ํ ๋๋ง๋ค yarn์ prestart๋ฅผ ๋จผ์ ์คํํ๊ณ start๋ฅผ ์คํํ๋ค.
yarn start๋ฅผ ํ๋ฉด index.js๋ฅผ ๋ง๋ค๊ณ node index.js๋ก ์คํํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
.
Node.js๋ typescript๋ฅผ ์ดํดํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ธ javascript ์ฝ๋๋ก ์ปดํ์ผํ๋ ์์ ์ด ํ์ํ๋ค.
'WEB > Front-End๐' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Typescript] ๋ธ๋ก์ฒด์ธ ๋ง๋ค๊ธฐ - predictable ํจ์๋ฆฌํด, ํจ์์ธ์ (0) | 2021.12.12 |
---|---|
[Typescript] predictable Typescript (0) | 2021.12.12 |
[React JS] Movie App 03 - React Route (0) | 2021.12.05 |
error:03000086:digital envelope routines::initialization error' (0) | 2021.12.04 |
[React JS] Props type (0) | 2021.12.04 |