๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Language/TypeScript

[TypeScript] TypeScript ์žฅ์ ๊ณผ ํŠน์ง•

 

 

TypeScript๋ž€?

  • Microsoft์—์„œ ๊ฐœ๋ฐœํ•œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.
  • JavaScript์˜ ํ™•์žฅ์œผ๋กœ, JavaScript์˜ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ํฌํ•จํ•˜๋ฉด์„œ๋„ ์ •์  ํƒ€์ž…์„ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

์™œ TypeScript๋ฅผ ์“ฐ๋Š”๊ฐ€?

1. ํƒ€์ž… ์•ˆ์ •์„ฑ

  • ํƒ€์ž… ์•ˆ์ •์„ฑ(Type Safety)์€ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜ ๋“ฑ์ด ์ •์˜๋œ ํƒ€์ž…๊ณผ ์ผ์น˜ํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
  • ํƒ€์ž„ ์•ˆ์ •์„ฑ์„ ํ†ตํ•ด ์–ป๋Š” ๊ฒƒ
    • ์ปดํŒŒ์ผ ํƒ€์ž„ ํƒ€์ž… ์ฒดํฌ : ์ปดํŒŒ์ผ ๊ณผ์ •์—์„œ ํƒ€์ž… ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ•˜๊ณ  ๊ฒฝ๊ณ ๋‚˜ ์˜ค๋ฅ˜๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.
    • ๊ฐ•๋ ฅํ•œ ํƒ€์ž… ์‹œ์Šคํ…œ : ํƒ€์ž…์ด ๋ช…ํ™•ํ•˜๊ฒŒ ์ง€์ •๋˜์–ด์•ผ ํ•˜๊ณ , ํƒ€์ž…์— ๋Œ€ํ•œ ์—„๊ฒฉํ•œ ๊ทœ์น™์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
    • ํƒ€์ž… ์ถ”๋ก  : ํƒ€์ž…์„ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์ •ํ•˜์ง€ ์•Š์•„๋„ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ํƒ€์ž…์„ ์ถ”๋ก ํ•ด์ค๋‹ˆ๋‹ค.
  • ํƒ€์ž… ์•ˆ์ •์„ฑ ๋•๋ถ„์— ๋ฒ„๊ทธ์™€ ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๊ณ , ๊ฐœ๋ฐœ์˜ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

2. ํ˜‘์—… ๊ด€์ 

  • ํƒ€์ž…์„ ๋ช…ํ™•ํ•˜๊ธฐ ์ •์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ๋•Œ ํ˜ผ๋™์„ ์ค„์—ฌ์ค๋‹ˆ๋‹ค.

 

TypeScript ํŠน์ง•

1. ์ปดํŒŒ์ผ ํ•˜๋ฉด JavaScript๋กœ ๋ณ€ํ™˜

  • ๊ธฐ๊ณ„์–ด๋กœ ์ปดํŒŒ์ผ ๋˜๋Š” ๋‹ค๋ฅธ ์ •์ ์–ธ์–ด์™€ ๋‹ค๋ฅด๊ฒŒ JavaScript๋กœ ์ปดํŒŒ์ผ ๋ฉ๋‹ˆ๋‹ค.
  • TypeScript๊ฐ€ ๋จผ์ € ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•˜๊ณ , ์—๋Ÿฌ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒƒ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋ฐœ๊ฒฌํ•˜๋ฉด ์ปดํŒŒ์ผ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ๋”ฐ๋ผ์„œ ๋Ÿฐํƒ€์ž„์ด ์•„๋‹ˆ๋ผ ์ปดํŒŒ์ผ ํƒ€์ž„์— ์—๋Ÿฌ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • JavaScript๋กœ ๋ณ€ํ™˜๋˜๋ฏ€๋กœ NodeJS์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

2. ํƒ€์ž…์„ ๋ช…์‹œํ•ด๋„ ๋˜๊ณ  ์•ˆ ํ•ด๋„ ๋œ๋‹ค.

  • TypeScript๊ฐ€ ํƒ€์ž… ์ถ”๋ก (type inference)์„ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ํƒ€์ž… ์ฃผ์„์„ ๋ช…์‹œํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.
    • ๋ณ€์ˆ˜ ์ด๋ฆ„: ํƒ€์ž… = ์ดˆ๊นƒ๊ฐ’ ํ˜•ํƒœ๋กœ ํƒ€์ž…์„ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ์„ ํƒ€์ž… ์ฃผ์„(type annotation)์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
    • ํƒ€์ž… ์ฃผ์„์„ ์“ฐ์ง€ ์•Š์•„๋„ ํƒ€์ž… ์ถ”๋ก ์„ ํ†ตํ•ด ์ดˆ๊นƒ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” ํƒ€์ž…์œผ๋กœ ์ง€์ •๋ฉ๋‹ˆ๋‹ค.
  • ํƒ€์ž… ํ‘œ๊ธฐ๋ฅผ ์ ๊ฒŒ ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. [์ฐธ๊ณ ]
    • ์ฝ”๋“œ๊ฐ€ ๋” ์งง๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง‘๋‹ˆ๋‹ค. ํƒ€์ž… ์ถ”๋ก ์„ ์ด์šฉํ•ฉ์‹œ๋‹ค.
    // ํƒ€์ž… ํ‘œ๊ธฐ X (๊ถŒ์žฅ)
    let a = "hello";
    a = "bye";
    a = 1; // JS์—์„œ๋Š” ๋˜์ง€๋งŒ TS์—์„œ๋Š” ์—๋Ÿฌ
    
    // ํƒ€์ž… ํ‘œ๊ธฐ O
    let b: boolean = false;
  •