타입스크립트란?

TypeScript는 말그대로 JavaScript에 Type을 부여하여 작성하는 언어이다. 간단하게는 자바스크립트의 일종이라고 볼 수 있다. 자바스크립트는 크게 ES6 이전과 이후, 그리고 타입스크립트로 나눌 수 있는데, 이때 ES6는 ESNext라고도 부르며, 자바스크립트의 최신문법이기도 하다. ES6와 타입스크립트는 각각 바벨과 TSC라는 트랜스파일러에 의해 ES5로 번역되어, 브라우저에게 전달된다. 다른 분야와 달리 웹 프론트엔드 분야에서는 OOP(객체지향프로그래밍)를 적용하기 쉽지 않다. 이를 개선하고자 노력한 결과, 오늘날 JS에서는 함수형프로그래밍에 객체 기반 타입을 얹는 방식이 자리잡게 되었다. 하지만 runtime에서만 에러를 확인할 수 있다는 점과, 협업에서의 문제점 등을 고려했을 때 JS에도 static type의 필요성이 대두되었고, 그 결과 타입스크립트가 급부상한다. 이것이 타입스크립트의 탄생 배경이라고 할 수 있겠다.

꼭 타입스크립트로 개발해야할까?

타입스크립트 공식문서에서는 타입스크립트를 써야하는 이유에 대해 다음과 같이 세 가지 이유를 제시하고 있다.

1. JavaScript and More
   TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
2. A Result You Can Trust
   TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
3. Safety at Scale
   TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

요약하자면, 자바스크립트를 더 효율적으로 사용할 수 있기 때문에 안 쓸 이유가 없다는 것이다. 하지만, JS에서 TS로의 변환을 꾀하는 많은 개발자들이 오히려 TS로 작성하는 데에서 오는 "타입 오류" 때문에 골치가 아파진다는 것 또한 사실이다.

다음은 타입스크립트로 React app을 개발해 온 나의 경험 상 타입스크립트를 사용했을 떄의 이점을 정리한 것이다.

1. 협업 및 유지보수성(더 나은 리팩토링, 더 나은 백엔드 연동)
2. 버그 줄어듦. 개발 효율성 증대
3. JS에서 넘어가기 쉬움

자바스크립트만으로도 충분히 앱을 개발할 수 있다. 하지만 여럿이 함께하는 프로젝트라면 타입스크립트가 훨씬 효율적이다. 타입스크립트로 작성하게 되면 우선 가독성 높은 코드를 작성할 수 있기 때문에 효율적인 협업이 가능하다. 또한, 백엔드 API와의 연동시에도 명세서에 따라 type 틀을 만들어두고 사용하면 오류가 발생할 가능성도 줄어든다. 이미 많은 프레임워크들에서도 TS를 채택하거나 사용할 것을 권장하고 있다. Angular2의 경우 타입스크립트를 필수적으로 사용해야 하며, React 또한 TS를 썼을 떄 더 나은 IntelliSense를 경험할 수 있으며 더 좋은 JSX용 코드를 작성할 수 있다. 특히, props를 전달해야할 때 컴포넌트 측에서 interface를 선언해두면 훨씬 효율적인 개발이 가능하다. 무엇보다 핵심적인 내용만 숙지하고 있으면 TS로 넘어가는 것은 크게 어렵지 않기 때문에, 런타임에 심각한 오류가 발생하는 것을 방지할 수 있다.

타입스크립트를 이용한 개발에서 중요한 것은?

소통이 곧 생명인 개발에 있어서 타입스크립트는 매우 효율적인 도구이다. 나를 위해서, 또 타인을 위해서 자바스크립트에서 타입스크립트로의 전환은 이제 선택이 아닌 필수이다. 다음은 타입스크립트로 사용할 수 있는 고유 문법들이다. 이를 적극적으로 활용해 효율적인 협업을 하도록 하자.

타입스크립트 고유 문법(도서 'Do it! 타입스크립트 프로그래밍' 발췌)

1. 타입주석과 타입추론

let n: number = 1;
let m = 2; // 타입 주석 달지 않아도 타입 추론

2. 인터페이스. 엘비스 연산자를 사용하면 변수선언시 생략 가능

interface Person {
  name: string;
  age?: number;
}

let person: Person = { name: "Jane" };

3. 튜플(서로 다른 타입을 허용하는 배열)

let tp: [boolean, number, string] = [true, 1, "OK"];

4. 제네릭 타입

class Container<T> {
  constructor(public value: T) {}
}

let numContainer: Container<numnber> = new Container<number>(1);

5. 대수 타입

type NumberOrString = number | string;
type AnimalAndPerson = Animal & Person;

Reference
https://yozm.wishket.com/magazine/detail/1376/
https://blog.bitsrc.io/5-strong-reasons-to-use-typescript-with-react-bc987da5d907