리액트) 타입스크립트 컴파일러 설치하기

타입스크립트(Typescript)

 

---

자바스크립트의 한계

 

자바스크립트의 특징 중 하나는 동적 타입의 언어였습니다.

즉, 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때

해당 값의 타입에 따라 변수 타입이 결정되는 것을 의미합니다.

 

동적 타이핑 시스템은 자바스크립트를 사용하는 개발자 또는 사람의 한계가 나타나게 됩니다.

 

// 의도 : 이 함수는 숫자 a, b의 합을 반환한다.
const sumNumber = (a, b) => {
    return a +  b;
}

console.log(sumNumber(1, 2)); // 3

 

이 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작합니다.

 

다음 코드도 보겠습니다.

// 의도 : 이 함수는 숫자 a, b의 합을 반환한다.
const sumNumber = (a, b) => {
    return a + b;
}

console.log(sumNumber(100));  // NaN
console.log(sumNumber("a", "b"));  // ab

 

두번째 예시를 보면 인자값에 "100"하나만 전달하고 있지만,

자바스크립트는 어떠한 오류도 없이 NaN을 반환합니다. 

또한 주석의 의도와는 다르게 문자열의 합을 구하는데도 사용할 수 있게 됩니다.

동적 타입이라는 특성 때문에 sumNumber 함수를 호출할 때 사용되는 인수 값에 따라 a와 b의 타입이 결정됩니다.

 

이는 기계입장에서는 정상적이지만 사람입장에서는 정상적이지 않습니다.

 

이 한계를 극복하고자 JSDoc, propTypes, 다트 같은 해결방안이 등장했습니다.

 

JSDoc의 한계

 

 JSDoc는 소스 코드에 타입 힌트를 제공하는 HTML문서를 생성 할 수 있지만,

이는 주석적인 성격이 강하기 때문에 강제성을 부여해서 사용하기는 어렵습니다.

 

propType의 한계

 

propType는 리액트에서 컴포넌트 props의 타입을 검사하기위해 사용하는 속성입니다.

하지만, 리액트라는 특정 라이브러리에서만 사용할 수 있다는 점에서 한계가 있습니다.

 

다트의 한계

 

다트는 구글이 자바스크립트를 대체하기 위해 제시한 언어로 propTpyes나 JSDoc 같은

보조 수단보다 근본적인 해결책으로 보였습니다. 하지만 자바스크립트가 이미 자리매김한 상황에

새로운 언어의 등장으로 과거의 브라우저 전쟁(인터넷 익스플로러 vs 넷스케이프 내비게이터) 전쟁처럼

개발의 파현화를 불러올 수 있어 달갑지 않게 보는 시선이 강했다고합니다.

 

3가지 모두 의미있는 해결방안이지만, 자바스크립트가 스스로 인터페이스를 기술할 수 있는 언어로

발전해야한다는 목소리가 커졌습니다.

 

---

타입스크립트의 등장

 

시간이 지나 마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트(TypeScript)를 공개했습니다.

다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었기 때문에 많은 환영을 받았습니다.

 

 

슈퍼셋(Superset)

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

 

---

타입스크립트 설치하기

 

노드가 설치되어 있어야 합니다.

node는 LTS버전을 추천합니다.

 

// node 버전 확인
node -v

 

 

VSCode 터미널에서 아래의 명령어로 타입스크립트 컴파일러를 설치할 수 있습니다.

 

$ sudo npm i -g typescript ts-node

 

 

아래의 코드로 제대로 설치되었는지 확인할 수 있습니다.

 

tsc -v

ts-node -v

 

typescript 버전 확인

 

 

---

타입스크립트 컴파일

 

아래와 같이 "index.ts"라는 파일을 만들고 간단하게 "Hello World!"를 출력해보겠습니다.

 

 

 

인덱스 파일 작성

// index.ts
console.log("Hello World!");

 

 

index.ts 실행

$ ts-node { 경로 }

// ex) 현재 폴더에 index.ts가 있는경우
$ ts-node index.ts

 

타입스크립트 출력확인

 

 

 

참고 서적 : 우아한 타입스크립트 with 리액트 (우아한 형제들 웹프론트개발그룹 지음)