μ™œ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•˜λŠ”κ°€?

νƒ€μž…μ΄ μ—†λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ‹€ν–‰λ˜μ—ˆμ„ λ•Œλ§Œ μ—λŸ¬λ₯Ό κ²€μΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ, μ‹€ν–‰ μ‹œμ μ—λ§Œ λ°œμƒν•˜λŠ” 잠재적인 였λ₯˜μ— λŒ€ν•΄μ„œλŠ” νŠΉλ³„ν•œ 쑰치λ₯Ό μ·¨ν•˜κΈ°κ°€ μ–΄λ ΅μŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ λ¬Έμ œμ μ„ ν•΄κ²°ν•˜κ³ μž λŒ€λ‘λ˜λŠ” 기술이 νƒ€μž…μŠ€ν¬λ¦½νŠΈμž…λ‹ˆλ‹€.

TypeScript 맛보기

뷰에 νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό 연동해보기 전에 κ°„λ‹¨ν•˜κ²Œ νƒ€μž…μŠ€ν¬λ¦½νŠΈμ˜ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€. λ¨Όμ € μ•„λž˜μ™€ 같이 νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ „μ—­μœΌλ‘œ μ„€μΉ˜ν•©λ‹ˆλ‹€.

npm i typescript -g

이제 λͺ…λ Ήμ–΄ μž…λ ₯ μ°½μ—μ„œ tsc λΌλŠ” λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이 λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜λ©΄ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±λœ μ½”λ“œλ₯Ό λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν•  수 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ‘œ λ³€ν™˜ν•  수 있게 되죠.

이제 νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

// app.ts
function sum(a: number, b: number) {
  return a + b;
}

두 숫자의 합을 κ΅¬ν•˜λŠ” sum ν•¨μˆ˜μ— νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ μš©ν•œ μ½”λ“œμž…λ‹ˆλ‹€. ν•¨μˆ˜μ˜ μΈμžλŠ” 숫자(number)만 받을 수 있게 λ©λ‹ˆλ‹€. μœ„μ˜ μ½”λ“œλ₯Ό μ•„λž˜μ™€ 같이 λ³€ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

tsc app.ts

μ‹€ν–‰ 결과둜 같은 μ΄λ¦„μ˜ js 파일인 app.jsλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

TypeScript의 μž₯점

μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œμ˜ μž₯점은 μœ„ μ½”λ“œλ₯Ό λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν•˜κΈ° 전에 μ—λŸ¬λ₯Ό κ²€μΆœν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ§Œμ•½ μ½”λ“œκ°€ μ•„λž˜μ™€ κ°™μ•˜λ‹€λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ‘œ λ³€ν™˜ν•  λ•Œ μ–΄λ–€ 일이 λ°œμƒν•˜μ˜€μ„κΉŒμš”?

// app.ts
function sum(a: number, b: number) {
  return a + b;
}

sum(10, [20]);

μœ„ μ½”λ“œλ₯Ό tsc둜 λ³€ν™˜ν•˜λ©΄ μ•„λž˜μ™€ 같은 μ—λŸ¬κ°€ λ°œμƒλ©λ‹ˆλ‹€.

app.ts λ³€ν™˜ 였λ₯˜

λ§Œμ•½ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό 쓰지 μ•Šκ³  κ·Έλƒ₯ λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν–ˆλ‹€λ©΄ 두 숫자의 합이 μ•„λ‹ˆλΌ μˆ«μžμ™€ 배열을 λ”ν–ˆμ„ κ²λ‹ˆλ‹€. λ”°λΌμ„œ, 숫자의 합을 κ΅¬ν•˜λ €κ³  λ§Œλ“  ν•¨μˆ˜μ˜ 본질이 νλ €μ§€κ²Œ 되죠.

μ‹€ν–‰ μ‹œμ μ—μ„œ μœ μ—°ν•˜κ²Œ νƒ€μž…μ„ λ°”κΎΈλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ νŠΉμ§•μ΄ λ•Œλ‘œλŠ” 이와 같이 예기치 λͺ»ν•œ λ™μž‘κ³Ό μ—λŸ¬λ₯Ό λ°œμƒμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•¨μœΌλ‘œμ¨ 이런 μ—λŸ¬λ“€μ„ 미리 μž‘μ•„λ‚Ό 수 있죠.

이처럼 λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν•˜κ³  잘λͺ»λœ κ²°κ³Όλ₯Ό ν™•μΈν•˜κΈ° 전에 미리 컴파일(μ½”λ“œ λ³€ν™˜) μ‹œμ μ— νƒ€μž… λ³€ν™˜μœΌλ‘œ μΈν•œ μ—λŸ¬λ₯Ό κ²€μΆœν•  수 μžˆλŠ” 것이 νƒ€μž…μŠ€ν¬λ¦½νŠΈμ˜ μž₯μ μž…λ‹ˆλ‹€.