Typescript의 장단점

타입스크립트 핸드북으로 각자 공부한 뒤(기본 타입, 인터페이스), 타입스크립트를 이번 프로젝트에 적용함으로써 얻는 장점과 단점에 대해 논의

타입스크립트

TypeScript 한글 문서

장점

/* 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 */
// 인터페이스가 바뀌면 문서화된 내용의 업데이트나 주석을 통한 메모, 또는 팀원간의 소통채널을 통해
// 모든 팀원이 변경사항을 인지한것을 확인해야 한다.

단점