타입스크립트 란?

1. 타입스크립트(TypeScript) 란?

자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 '타입'을 부여한 언어를 의미함.

➡️ 좀 더 들어가보자면...

1) MicroSoft에서 개발, 유지/관리되는 Apache 라이센스가 부여된 오픈소스 프로그래밍 언어
2) 대규모 어플리케이션 개발에서 자바스크립트의 한계점으로 인해 개발된 언어
3) ES5의 슈퍼셋이므로 기존 자바스크립트(ES5) 문법을 그대로 사용 가능
4) ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도의 트랜스파일러(Transfiler)를 사용하지 않아도 ES6의 새로운 기능을 기존 자바스크립트 엔진(브라우저, node.js)에서 사용 가능

2. 타입 스크립트의 빌드 원리?

1. 타입스크립트로 코드를 작성한다.
2. 작성된 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱하여 '타입스크립트 AST(추상 문법 트리)'라는 자료구조로 변환
3. '타입 검사기(Typechecker)'를 통하여 파싱 된 '타입스크립트 AST 코드'의 타입을 체크
4. 타입스크립트 AST 코드를 '자바스크립트 코드'로 변환

--- 위 과정은 타입스크립트 컴파일러(tsc)에 의해 수행

5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다.
6. 자바스크립트 AST를 '바이트 코드'로 변환한다.
7. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다.

--- 위 과정은 '자바스크립트 런타임(js 엔진, node.js)'에 의해 수행

✔️ 즉, 프로그램 빌드는 컴파일러가 소스 코드를 파싱해 AST로 만들고, AST를 바이트 코드로 변환한 것을 런타임이 평가하도록 지시하는 것

TSC는 타입스크립트 코드를 자바스크립트 코드로 컴파일할 때는 개발자가 사용한 타입을 확인하지 않는다. 즉, 개발자가 코드에 작성한 타입 정보는 최종 프로그램에 어떠한 영향을 주지 않으며, 단지 개발자들이 타입을 확인하는 데에만 쓰임.

3. 왜 사용하는가?

1) 에러 사전 방지

이 설명을 하기 위해 타입스크립트와 자바스크립트를 비교하는 과정이 필요하다.

💫 먼저 타입 시스템을 비교해서 알아보자.

<자바스크립트>
타입 결정 방식 : 동적
자동 타입 변환 : O
타입 확인 시기 : 런타임
에러 검출 시기 : 런타임(대부분)

------------------------------------------

<타입스크립트>
타입 결정 방식 : 정적
자동 타입 변환 : X (대부분)
타입 확인 시기 : 컴파일
에러 검출 시기 : 컴파일(대부분)

타입스크립트의 정적 타입은
1. 코드의 가독성을 높여줌(애초에 타입을 설정하기 때문에 다른 개발자가 봤을 때의 가독성이 좋다고 할 수 있다)
2. 자바스크립트의 단점인 타입 안정성 보장

🤔 타입 결정 방법?

동적 타입 바인딩이란, 자바스크립트가 프로그램을 실행할 때(런타임 시)만 특정 데이터 타입을 알 수 있다.
반대로 타입스크립트는 정적으로 타입을 확인하므로 컴파일 시(프로그래밍 언어(고급언어)가 컴퓨터가 이해할 수 있는 기계어로 변환시키는 과정) 타입을 확인하고 코드 실행 전 에러를 검출할 수 있다.

📝 예시를 통해 알아보자.

// test.js
funtion sum(a, b) {
  return a + b;
}

// test.ts
function sum(a: number, b: number) {
  return a + b;
}

위 두 코드는 모두 숫자의 합을 구하는 함수 코드다.
sum(10, 20); 을 실행하면 둘 다 30이라는 결과가 나온다.

그러나...
sum('10', '20'); 을 하게 된다면..?

우리가 일반적으로 아는 자바스크립트는 string값 1020 이라는 결과가 나온다..

하지만 타입스크립트에서는 sum('10', '20'); 코드 자체에서 에러가 발생하여 실행되지 않는다.
에러 메세지: '"10"' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다..

➡️ 타입스크립트는 의도치 않은 코드의 동작을 예방할 수 있다.

2) 코드의 자동 완성과 가이드

: 프론트엔드 개발 시 가장 많은 비율로 사용되는 개발툴인 vscode는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어있다.

💫 아까 작성한 코드로 비교해보자면...

// test.js
funtion sum(a, b) {
  return a + b;
}

let tot = sum(10, 20);
tot.toLocalString(); // 이때는 매개변수 a, b가 런타임 이전이므로 어떤 타입인지 알 수 없어 숫자에서 사용할 수 있는 API나 메서드 후보를 추천해주지 않는다.

// test.ts
function sum(a: number, b: number) {
  return a + b;
}

let tot = sum(10, 20);
tot.toLocalString(); // 반면, 타입스크립트는 매개변수 a, b에 이미 타입을 설정해주어 숫자라는 것을 알기 때문에 tot. 만 작성해도 숫자 관련 API나 메서드 후보를 미리보기로 띄워주어 개발시 편리하고 보다 빠른 작성이 가능하다.