[우아한 타입 스크립트 with 리액트] 타입스크립트의 등장

4. 타입스크립트의 등장

시간이 자나 마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트(Typescript)를 공개했다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었고, 아래와 같은 단점을 극복할 수 있었기 때문에 많은 환영을 받았다.

 

💡 슈퍼셋( Superset ) 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다.

 

⭐️ 안정성 보장

타입스크립트는 정적 타이핑을 제공한다. 컴파일 단계에서 타입 검사를 해주기 때문에 자바스크립트를 사용했을 때 빈번하게 발생하는 타입 에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어서 안정성이 크게 높아진다.

 

⭐️ 개발 생산성 향상

VSCode 등의 IDE 에서 타입 자동 완성 기능을 제공한다. 이 기능으로 변수와 함수 타입을 추론할 수 있고, 리액트를 사용할 때 어떤 prop 을 넘겨야 하는지 매번 확인하지 않아도 사용부에서 바로 볼 수 있기 때문에 개발 생산성이 크게 향상된다.

 

⭐️ 협업에 유리

타입스크립트를 사용하면 복잡한 애플리케이션 개발, 협업에 유리하다. 타입스크립트는 인터페이스(interface), 제네릭(Generic) 등을 지원하는데 인터페이스가 기술되면 코드를 더 쉽게 이해할 수 있게 도와준다. 또한 복잡한 애플리케이션일수록 협업하는 개발자 수도 증가하는데 자동 완성 기능이나 기술된 인터페이스로 코드를 쉽게 파악할 수 있다.

💡 타입스크립트 인터페이스( interface ) 타입스크립트 인터페이스는 객체 구조를 정의하는 역할을 한다. 다시 말해 특정 객체가 가져야 하는 속성과 메서드의 집합을 인터페이스로 정의해서 객체가 그 구조를 따르게 한다.

 

⭐️ 자바스크립트에 점진적으로 적용 가능

타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 일괄 전환이 아닌 점진적 도입이 가능하다. 전체 프로젝트가 아닌 일부 프로젝트, 그중에서도 일부 기능부터 점진적으로 도입 해볼 수 있다. 우아한 형제들도 주문 접수 앱 웹 뷰의 새 기능에 리액트와 타입스크립트를 선제적으로 적용해 본 후에 대대적으로 리액트 + 타입스크립트로 개편하는 전략을 사용했다.