Progressing slowly but steady

1 minute read

TypeScript

1. 개념

TypeScript - Microsoft사에서 구현한 JavaScript의 Super Set 프로그래밍 언어

2. 주요 특징

  1. 프로그래밍 언어 : 자바스크립트의 모든 구문과, 타입을 정의하고 사용하기 위한 새로운 타입스크립트 고유 구문이 포함된 언어

  2. 타입 검사기 : 자바스크립트 및 타입스크립트로 작성된 일련의 파일에서 생성된 모든 구성 요소 (변수, 함수 등)을 이해하고, 잘못 구성된 부분을 알려주는 프로그램
  3. 컴파일러 : 타입 검사기를 실행하고, 문제를 보고한 후, 이에 대응되는 자바스크립트 코드를 생성하는 프로그램
  4. 언어 서비스 : 타입 검사기를 사용하는 vscode와 같은 편집기에 개발자에게 유요한 유틸리티 제공법을 알려주는 프로그램

3. 타입스크립트 코드 동작 과정

  1. 개발자가 ‘타입스크립트 코드’로 작성 한다.

  2. 작성한 타입스크립트 코드는 ‘타입스크립트 컴파일러(tsc)’를 통해 파싱하여 ‘타입스크립트 AST(Abstract Syntax Tree) 코드’로 변환된다.
  3. ‘타입 검사기(Typechecker)’를 통하여 파싱 된 ‘타입스크립트 AST 코드’의 타입을 체크한다.

  4. 타입스크립트 AST의 코드를 ‘자바스크립트 코드’로 변환한다.

    —[ 해당 과정까지는 ‘타입스크립트 컴파일러(tsc)’에 의해 수행이 된다. ]—

  5. 자바스크립트 코드를 ‘자바스크립트 AST 코드’로 파싱한다.
  6. 자바스크립트 AST를 ‘바이트 코드’로 변환된다.

  7. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다.

    —[ 해당 과정까지는 ‘자바스크립트 런타임(js 엔진, node.js)’에 의해 수행이 된다. ]—

[ 동작 과정 요약 ]

자바스크립트 코드 -> (타입스크립트 컴파일러로 파싱) -> 타입스크립트 AST 코드 -> (타입 검사기로 체크) -> 자바스크립트 코드 -> (파싱) -> 자바스크립트 AST 코드 -> 바이트 코드 -> (런타임) -> 코드 실행

4. 셀프 정리

TypeScript의 핵심은 이름 자체에서 드러나듯, 매개변수나 변수에 저장되는 값의 타입을 제한함하는 것에 있다.

스크립트 언어 기반의 JavaScript의 경우, 어떤 타입을 반환하는지 명시하지 않는 동적 타입으로, 실제로 해당 코드가 정확하게 작성되었는지를 (변수와 매개 변수, 반환값 등의 타입이 제대로 되어있는지, 매개변수의 수는 제대로 맞는지 등) 실행 사전에 발견하기 어렵다.

반면에 타입스크립트는 코드를 작성하는 시점에, 해당 타입 들을 제한하고 실제 해당 코드를 실행하기에 앞서 컴파일 타임에 적절한 타입인지를 체크하는 정적 타입으로 사전에 이러한 문제를 줄여준다.

이와 같이 타입스크립트는 코드의 가독성을 높이고, 타입 안전성을 보장해준다.

cf.

  1. TypeScript 단순 실습

  2. 로컬의 특정 디렉토리에서 tsc –init을 실행하면, (이미 npm을 통해 typescript를 설치했다 가정) 타입스크립트가 코드를 컴파일하고 분석할 때에 사용하는 각종 설정들에 대한 정보인 tsconfig.json 파일이 생성된다. vscode에서 이러한 tsconfig.json 파일이 있는 디렉토리를 열면 해당 디렉토리를 타입스크립트 프로젝트로 인식한다.

You may also enjoy