본문 바로가기
Programming 개발은 구글로/Web[프론트엔드&백엔드]

[Typescript] 1. 타입스크립트란?

by 40대직장인 2022. 7. 19.

TS(타입스크립트)

: MS(MicroSoft)가 개발하고 유지하고 있는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 오픈소스 프로그래밍 언어입니다.

 

🟩 자바스크립트 대비 타입스크립트가 좋은 이유

  • 버그를 줄일 수 있음
  • 쉬운 유지 보수
  • 퀄리티가 좋은 코드

 

타입 표기: 변수 값에 데이터 타입 지정 가능

 

 

예제코드)

// Javascript
function add(a, b) {
	return a+b;
}
console.log(add('3', '5'));

결과값: 35

 

// Typescript
function add(a: number, b: number) {
	return a+b; 
}
console.log(add('3', '5'));

Compile error 발생

 

🟥 객체 지향 프로그래밍 지원

ES6(ECMAScript 6) 문법을 포함하고 있으며, 클래스, 인터페이스, public, private, 상속, 모듈 등과 같은 객체지향 프로그래밍 패턴을 지원합니다.

 

🟨 컴파일 타임 오류

자바스크립트이면서 동시에 컴파일러로 타임스크립트를 자바스크립트로 변환을 합니다.

컴파일이란? 어떤 언어의 코드를 다른 언어로 변경해주는 변환 과정입니다.

 

🟦 타입스크립트 컴파일러는 파서, 바인더, 타입 체커, 에미터, 전처리기로 구성

  • 파서(parser) : 읽어 들인 소스 코드를 해석해 구문 트리를 만들고, 구문 트리를 다시 해석해 추상 구문 트리를 생성한다. 
  • 바인더(binder) : 인터페이스나 모듈, 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 심벌(Symbol)로 보고 심벌 간의 규칙을 정의한다.
  • 타입 체커(type checker) : 타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
  • 에미터(emitter) : 입력된 *.ts 같은 타입스크립트 파일을 *.js, *.d.ts, *.js.map 유형의 파일로 생성하는 기능을 수행한다.
  • 전처리기(pre-processor) : 타입스크립트 파일에 선언된 import 문이나 외부 호출 선언이 있을 때 참조할 수 있는 파일을 가져와 정렬된 파일 목록을 생성한다. 파일 목록을 만들 때는 .d.ts 보다는 .ts 파일을 우선적으로 호출해 가져온다. 결국 컴파일러는 전처리기로부터 생성된 파일 목록을 이용해 파일을 호출하고 컴파일을 수행한다.

 

 

댓글