[TypeScript] ๐Ÿณ 1.3 ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ

6282 ๋‹จ์–ด typescripttypescript

๐Ÿณ 1.3 ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” IDE์— ์ด๋ฏธ ๋‚ด์žฅ๋˜์žˆ๊ฑฐ๋‚˜ ๋ณ„๋„ IDEํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ฑ…์—์„œ๋Š” Node.js ๋Ÿฐํƒ€์ž„์„ ์‚ฌ์šฉ. ( Node์™€ NPM์„ ์„ค์น˜ ํ›„ ๋ฒ„์ „ํ™•์ธํ•˜๊ธฐ. )

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ „์—ญ ์„ค์น˜

npm install -g typescript
tsc -v

๐ŸŒ ์ปดํŒŒ์ผ ๊ณผ์ •์„ ์•Œ์•„๋ณด์ž.

// 1_1.ts
function getFinalPrice(price: number, discount: number){ // ํ•จ์ˆ˜ ์ธ์ž์— ํƒ€์ž…์ •์˜.
    return price - price/discount;
}

console.log(getFinalPrice(100, 10)); // ์˜ฌ๋ฐ”๋ฅธ ํ˜ธ์ถœ
console.log(getFinalPrice(100, '10%')); // ์ž˜๋ชป๋œ ํ˜ธ์ถœ
tsc 1_1

์ปดํŒŒ์ผ์˜ค๋ฅ˜๋Š” ๋œจ์ง€๋งŒ jsํŒŒ์ผ์€ ์ƒ์„ฑ์ด ๋œ๋‹ค.

๐Ÿ‘‰ ์™œ?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ด€์ ์—์„œ๋Š” 1_1.js๋Š” ์œ ํšจํ•˜๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์‹ค์ œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋Š” ํŒŒ์ผ์„ ์ƒ์„ฑํ•  ์ˆ˜ ์—†๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์—๋Š” 20๊ฐœ๊ฐ€ ๋„˜๋Š” ์˜ต์…˜์ด ์žˆ๋Š”๋ฐ ๊ทธ์ค‘ noEmitOnError๋ฅผ ์•Œ์•„๋ณด์ž.

๐Ÿ‘‰ noEmitOnError

์ƒ์„ฑ๋œ jsํŒŒ์ผ์„ ์‚ญ์ œํ•˜๊ณ  noEmitOnError๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰.

tsc 1_1 --noEmitOnError true

์˜ค๋ฅ˜๋ฅผ ๊ณ ์น˜์ง€ ์•Š๋Š”์ด์ƒ jsํŒŒ์ผ์ด ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

โ— noEmitOnError์‚ฌ์šฉ์‹œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋ชจ๋“  ์˜ค๋ฅ˜๊ฐ€ ๊ณ ์ณ์งˆ ๋•Œ๊นŒ์ง€ ์ด์ „์— ์ƒ์„ฑ๋œ jsํŒŒ์ผ์„ ๋ฎ์–ด์“ฐ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰ --t

ํŠน์ • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒ„์ „์„ ๊ฐ€๋ฆฌํ‚ด.
ES5, ES6์ด์ƒ์˜ ๋ฌธ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.

tsc --t ES5 1_1

์ƒ์„ฑ๋œ JSํŒŒ์ผ

function getFinalPrice(price, discount) {
    return price - price / discount;
}
console.log(getFinalPrice(100, 10)); // ์˜ฌ๋ฐ”๋ฅธ ํ˜ธ์ถœ
// console.log(getFinalPrice(100, '10%')); // ์ž˜๋ชป๋œ ํ˜ธ์ถœ

๐Ÿ‘‰ tsconfig.json

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ํ•ด๋‹น ์†Œ์Šค, ์ตœ์ข… ๋””๋ ‰ํ„ฐ๋ฆฌ, ํƒ€๊ฒŸ ๋“ฑ ์˜ต์…˜์„ ๋ฏธ๋ฆฌ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ ํด๋”์— tsconfig.jsonํŒŒ์ผ์ด ์žˆ๋Š” ์ƒํƒœ์—์„œ tsc๋ช…๋ น์–ด ์ž…๋ ฅํ•˜๋ฉด tsconfig.json๋‚ด์˜ ๋ชจ๋“  ์˜ต์…˜์„ ์ฝ์Šต๋‹ˆ๋‹ค.

{
    "compilerOptions":{
        "baseUrl":"src", // srcํด๋” ๋‚ด ๋ชจ๋“  .tsํŒŒ์ผ์„ ์ปดํŒŒ์ผ
		"outDir":"./dist", // dist ํด๋”์— ์ƒ์„ฑ๋œ .jsํŒŒ์ผ์„ ์ €์žฅ
        "noEmitOnError":true, // ์ปดํŒŒ์ผ ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์‹œ, jsํŒŒ์ผ ์ƒ์„ฑ X
        "target":"es5" // es5๋กœ ์ปดํŒŒ์ผ
    };
}

โ— ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์˜ต์…˜ ๋Œ€์ƒ์€ ๊ตฌ๋ฌธ ๊ฒ€์‚ฌ์—๋„ ์‚ฌ์šฉ๋œ๋‹ค

๐ŸŒ ์‹ค์Šต

{
    "compilerOptions":{
        "noEmitOnError":true, // ์ปดํŒŒ์ผ ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์‹œ, jsํŒŒ์ผ ์ƒ์„ฑ X
        "target":"es5", // es5๋กœ ์ปดํŒŒ์ผ
        "watch":true // ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ๋‹ค์‹œ ์ปดํŒŒ์ผํ•จ.
    }
}

์œ„ ํŒŒ์ผ์„ 1_1๊ณผ ๊ฐ™์€ ๊ฒฝ๋กœ์— ๋‘๊ณ , ์•„๋ž˜ ํ„ฐ๋ฏธ๋„ ๋ช…๋ น์„ ์‹คํ–‰

tsc

watch๋ชจ๋“œ๋กœ ์ธํ•ด ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ข…๋ฃŒ๋˜์ง€ ์•Š์Œ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

main.jsํŒŒ์ผ์€ ์ƒ์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ค๋ฅ˜๋ฅผ ์ˆ˜์ •ํ•˜๋ฉด main.js๋„ ์ˆ˜์ •๋จ. (๊ฐœ์‹ฑ๊ธฐ)

โ— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ ์‹œ์ž‘ํ•  ๋•Œ ํ•ด๋‹น ํด๋”์—์„œ tsc --init ๋ช…๋ น์–ด๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ดˆ๊ธฐํ™”ํ•จ.
์ƒ์„ฑ๋œ tsconfig.json์— ๋ชจ๋“  ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜์ด ์žˆ์œผ๋ฉฐ ๋Œ€๋ถ€๋ถ„ ์ฝ”๋“œ๊ฐ€ ์ฃผ์„์ฒ˜๋ฆฌ ๋˜์žˆ์Œ. ํ•„์š”์— ๋”ฐ๋ผ ์ฃผ์„ ์ฒ˜๋ฆฌ๋ฅผ ์ œ๊ฑฐ.

๐Ÿ“˜ ์ฐธ๊ณ 

bit.ly/384AgfN

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ