타입스크립트란?

최종 수정 : 2024-05-27

 

마이크로소프트의 개발자이자 C#언어의 창시자인 Anders Hejlsberg가 만들었다. 따라서, C#과 TypeSciprt의 비슷한 점이 꽤 존재한다.

 

타입스크립트는 자바스크립트의 상위호환의 언어이다. "또 다른 언어를 하나 배워야 하는구나"라고 생각할 수 있지만, 그렇지 않고, 자바스크립트를 확장한 언어라고 생각하면 된다.

 

자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어라고 생각하면 된다.

자바스크립트 + 타입

점진적 타입 시스템

실행 전 검사를 통해 타입 안정성을 확보한다. 또한 자동으로 변수의 타입을 추론한다.

(정적 타입 시스템 + 동적 타입 시스템)

https://young-taek.tistory.com/276

타입 시스템 - 정적 / 동적 / 점진적

---

Q. 자바스크립트의 한계

자바스크립트는 런타임 오류가 발생한다. 다시 말해, 프로그램 실행 도중에 발생한다. 이 이유는 코드가 실행되기 전에 오류를 검사하지 않으며, 코드를 한 줄 한 줄 읽어서 실행하는 인터프리티 언어라는 특성 때문이다. 또한, 정해진 타입이라는 게 없는 '동적 타이핑 언어'의 특성을 갖는다. 자유롭게 사용할 수 있다는 장점은 있지만 실수의 가능성이 존재한다.

 

1) 런타임 오류

인터프리티 언어이기 때문에 소스 코드를 한 줄씩 읽어나가면서 실행한다. 코드를 실행하기 전에 코드가 올바른지 검사하지 않기 때문에 발생한다. 따라서, 프로그램 실행 도중에 오류가 발견되는데, 이를 런타임 오류라고 한다. 규모가 커질수록, 오류가 늦게 발견되는 문제가 발생할 수도 있다. 즉, 배포 후에 오류가 나타나는 현상을 맞이할 수도 있는 것이다.

 

2) 동적 타입 언어

자유롭게 사용할 수 있다는 유연성이라는 장점은 존재하지만, 실수의 가능성 역시 늘어난다. 더 난감한 점은, 실수를 발견하는데 많은 시간과 집중이 필요하다는 점이다. 어찌보면, 사람의 한계라고 말할 수 있다.

 

3) 객체 지향을 온전히 구현하는 데 부족함이 있다.

자바스크립트는 프로토타입 기반의 객체 지향 언어로 분류된다. 그러나 자바스크립트는 전통적인 객체 지향 프로그래밍에서 기대할 수 있는 일부 기능을 지원하지 않아 객체 지향을 온전히 구현하는 데 부족함이 있다.

 

이 한계를 극복하기 위한 방법

1) JSDoc

// ex)
/**
 * @description 두 수의 합을 구하는 함수
 * @param {number} a 첫 번째 숫자
 * @param {number} b 두 번째 숫자
 */
 
 function sum(a, b) {
  return a + b;
 }
 let total = sum(200, 300)

프로젝트마다 다르겠지만 JSDoc으로도 충분히 타입스크립트 효과를 낼 수 있다. JSDoc으로 자바스크립트 코드에 주석을 다는 게 더 낫지 않을까 싶지만, 반복적인 코드를 작성해야 하는 문제가 발생한다. 

따라서 현재 JSDoc으로 작성해야 할 코드양이 많고 앞으로 더 많아진다면 타입스크립트를 배우는 것이 중-장기적으로는 더 좋은 선택이다.

 

2) propTypes

리액트에서 컴포넌트 props의 타입을 검사하기 위해 사용하는 속성. prop에 유효한 값이 전달되었는지 확인할 수 있지만, 전체 애플리케이션의 타입 검사를 하는 데는 사용할 수 없다. 또한 리액트라는 특정 라이브러리에서만 사용할 수 있다는 한계가 존재한다.

 

3) 다트

다트(Dart)는 구글이 자바스크립트를 대체하기 위해 제시한 새로운 언어로 propType나 JSDoc 같은 보조 수단보다 근본적인 해결책으로 보였다.

 

3가지 모두 의미 있는 해결 방안이었으나 자바스크립트 스스로가 인터페이스를 기술할 수 있는 언어로 발전해야 한다는 목소리가 커졌다.

---

타입스크립트(TypeScript)

마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트를 공개했다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었다.

 

슈퍼셋?

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

 

안정성 보장

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

 

개발 생산성 향상

VSCode 등의 IDE에서 타입 자동 완성 기능을 제공한다. 이 기능으로 변수와 함수 타입을 추론할 수 있다.

 

협업에 유리

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

 

인터페이스?

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

 

점진적 타이핑 / 덕 타이핑 / 구조적 타이핑(= 구조적 타입 시스템)

1. 점진적 타이핑
- 프로그램 전체가 아닌 개발자가 명시한 일부분만 정적 타입 검사를 거치게 하고 나머지 부분은 동적 타입 검사가 이루어지 하여 점진적 개선이 가능하다.

2. 덕 타이핑
- 객체의 변수와 메서드 집합이 객체의 타입을 결정하게 해준다.

3. 구조적 타이핑 (= 구조적 타입 시스템)
- 객체의 속성에 해당하는 타입의 속성을 갖는지를 검사하여 타입 호환성을 결정한다.

구조적 타이핑 언어는 하나의 클래스에 여러 인터페이스가 연결될 수 있으며, 하나의 인터페이스에 여러 클래스가 연결될 수 있다.

 

객체 지향을 가능토록 한다.

타입스크립트가 private과 같은 접근 제어자나 추상 클래스, 추상 메서드 같은 기능을 지원함으로써 해결해준다. 결국, 객체 지향을 구현할 수 있도록 도와주는 자바스크립트의 슈퍼셋이라 말할 수 있다.

---

타입스크립트를 시작하기 어려운 이유

타입스크립트의 여러 장점이 있음에도 불구하고 선뜻 도입하기 어렵게 느껴진다. 그 이유로는 무언가를 새로 배워야 한다는 사실과 어려울 것 같다는 느낌에서 비롯된다.

 

1) 적지 않은 학습 비용

- 타입 시스템(type system)이라는 개념과 새로운 언어 이해, 그리고 타입스크립트를 실행하는 기반 환경(Node.js나 NPM 등)을 이해해야 한다.

 

2) 운영 중인 서비스 적용에 대한 부담감

- 이미 개발되어 있는 웹 서비스나 레거시 시스템에서 타입스크립트를 적용하는 데 어려움을 느낀다.

- 타입스크립트를 점진적으로 적용한 경험이 없다면 타입스크립트를 도입하는 것이 쉽지 않다.

---

참고 자료

우아한 타입스크립트 리액트(p.26-31)

처음으로 배우는 타입스크립트(p.23-37)

https://young-taek.tistory.com/281

타입스크립트의 객체 지향