๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
WEB/Front-End๐ŸŒ

[Typescript] ๋ธ”๋ก์ฒด์ธ ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ

by narang111 2021. 12. 10.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ 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 ์ฝ”๋“œ๋กœ ์ปดํŒŒ์ผํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค.