Skip to content

πŸ“• 10μ›” 26일 슀크럼 기둝

Chun Hwa Park edited this page Oct 26, 2021 · 1 revision

Typescript의 μž₯단점

νƒ€μž…μŠ€ν¬λ¦½νŠΈ ν•Έλ“œλΆμœΌλ‘œ 각자 κ³΅λΆ€ν•œ λ’€(κΈ°λ³Έ νƒ€μž…, μΈν„°νŽ˜μ΄μŠ€), νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό 이번 ν”„λ‘œμ νŠΈμ— μ μš©ν•¨μœΌλ‘œμ¨ μ–»λŠ” μž₯점과 단점에 λŒ€ν•΄ λ…Όμ˜

TypeScript ν•œκΈ€ λ¬Έμ„œ

μž₯점

  • νƒ€μž…μ΄ λͺ…ν™•ν•˜λ‹€. (+ λ°±μ—”λ“œ λͺ¨λΈ κ°œλ°œμ— μ’‹λ‹€)
  • TypeORM 이용 κ°€λŠ₯. (+ JPA와 문법이 λΉ„μŠ·ν•˜λ‹€.)
  • νƒ€μž…μ— λŒ€ν•œ 정리λ₯Ό ν™•μ‹€ν•˜κ²Œ ν•˜λ©΄ λ³„λ„μ˜ API λ¬Έμ„œ μžλ™ν™”κ°€ ν•„μš” 없을 것 κ°™λ‹€.
/* 1. λͺ…μ‹œμ  암묡적 μΈν„°νŽ˜μ΄μŠ€ */
/* TypeScript */

// λͺ…μ‹œμ  μΈν„°νŽ˜μ΄μŠ€
interface Greetable {
  greet: () => void;
}

function hello(someone: Greetable) {
  someone.greet();
}

/* JavaScript */
function hello(someone) {
  // 암묡적 μΈν„°νŽ˜μ΄μŠ€
  // -> μ—†λŠ” 속성을 μ‚¬μš©ν•˜λ©΄ λŸ°νƒ€μž„μ—μ„œ μ—λŸ¬κ°€ λ‚œλ‹€.
  //    μ‚¬μš©μžκ°€ 인자둜 μ–΄λ–€ νƒ€μž…μ΄ μ‚¬μš©λ˜λŠ”μ§€ μ•Œκ³ μžˆλ‹€κ³  λ‹¨μ •ν•œλ‹€.
  someone.greet();
}

/* 
 * 2. λ¬Έμ„œμ˜ μ½”λ“œν™” 
 *    μ•„λž˜μ™€ 같은 κ²½μš°μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ¬Έμ„œν™”κ°€ λ°˜λ“œμ‹œ λ™λ°˜λ˜μ–΄μ•Ό ν•˜μ§€λ§Œ,
 *    νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” λ³„λ„μ˜ λ¬Έμ„œν™” 없이 Union νƒ€μž… 선언을 ν†΅ν•΄μ„œ λŸ°νƒ€μž„ 이전 검사가 κ°€λŠ₯ν•˜κ³ 
 *    VSCode의 μžλ™μ™„μ„±μ˜ 도움을 받을 수 μžˆλ‹€.
 */
/* TypeScript */
type SomeType = "foo" | "bar" | "baz";
const myType: SomeType = "foo";
// ...
const anotherType: SomeType = "ham";  // Error

/* JavaScript */
// myTypeμ—λŠ” "foo", "bar" λ˜λŠ” "baz" 만 올 수 μžˆλ‹€.
const myType = "foo";
// ...
const anotherType = "ham";  // 잠재적 버그

/* 3. ν˜‘μ—…μ—μ„œμ˜ 이점 */
/* TypeScript */
interface Product {
  price: number;
  name: string;
}

function buyProduct(product: Product) {
  console.log('κ°’:', product.price);
}
// ... μΈν„°νŽ˜μ΄μŠ€μ˜ λ³€κ²½

interface Product {
  cost: number;  // 변경됨
  name: string;
}

function buyProduct(product: Product) {
	// cost둜 λ°”λ€Œμ–΄ 미리 λŸ°νƒ€μž„μ˜€λ₯˜λ₯Ό λ°œμƒν• κ²ƒμ„ μž‘μ•„μ€€λ‹€.
  console.log('κ°’:', product.price);  // Error
}

/* JavaScript */
// μΈν„°νŽ˜μ΄μŠ€κ°€ λ°”λ€Œλ©΄ λ¬Έμ„œν™”λœ λ‚΄μš©μ˜ μ—…λ°μ΄νŠΈλ‚˜ 주석을 ν†΅ν•œ λ©”λͺ¨, λ˜λŠ” νŒ€μ›κ°„μ˜ μ†Œν†΅μ±„λ„μ„ 톡해
// λͺ¨λ“  νŒ€μ›μ΄ 변경사항을 μΈμ§€ν•œκ²ƒμ„ 확인해야 ν•œλ‹€.

단점

  • ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš©ν•˜λŠ” νƒ€μž…μ˜ μˆ˜κ°€ λ§Žμ•„μ§€λ©΄ κ΄€λ¦¬ν•˜κΈ° νž˜λ“€μ–΄μ§„λ‹€.
  • 라이브러리 μ‚¬μš© μ‹œμ— λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ μ •μ˜ν•œ νƒ€μž…μ„ λ³„λ„λ‘œ 곡뢀해야 ν•œλ‹€.
  • ν˜„μž¬ 상황, λ‚―μ„  μ–Έμ–΄μ˜ 적응 기간이 ν•„μš”ν•˜λ‹€.
  • Anyλ₯Ό λ‚¨μš©ν•  κ°€λŠ₯성이 μžˆλ‹€.
  • 가독성이 쒋지 μ•Šλ‹€...? / νƒ€μž…μ— λŒ€ν•΄ 였λ₯˜κ°€ 많이 λ°œμƒν•œλ‹€.
Clone this wiki locally