Typescript

[Typescript] - (1) Typescript 사용하기

holajjm 2024. 7. 19. 14:57
본 포스팅은 Inflearn(인프런) 이정환님의 TypeScript 강의를 기반으로 작성되었습니다.

[타입스크립트?]

  • 타입스크립트는 2012년에 MS 개발자이자 C# 언어의 창시자인 덴마크인 앤더스 하일스버그(Anders Hejlsberg)가 만든 언어로 JS에 타입관련 기능들을 추가하여 JS의 확장판으로 안정성을 갖고 더 안전하게 사용할 수 있도록 언어이다.
  • 자바스크립트는 브라우저 내에서 간단한 기능만을 위해서 발명된 언어이며 nodeJS라는 JS 런타임 환경이 생기면서 어디서든 JS를 구동 가능하고 다양한 웹앱을 만들 수 있게 되었지만 유연한 문법에 자유롭고 버그 발생 가능성이 높았기에 안정성이 부족하고 안전하지 못한 언어라는 단점이 있다.
  • 그래서 나오게 된 언어가 TS이며 간단히 말해 JS에서 변수의 타입만 정해주면 TS가 된다.

[타입 시스템에 따른 JS의 한계와 TS]

타입 시스템

- 정적 타입 시스템: 코드 실행 이전 모든 변수의 타입을 고정적으로 결정하는 엄격하고 고정적인 시스템.(ex/ C, C#, Java)

1. 코드 실행 이전에 모든 변수의 타입을 결정함으로 코드를 작성할 때 모든 변수의 타입을 결정해주어야 함.
2. 타이핑 양이 매우 증가함.

 

- 동적 타입 시스템 : 코드를 실행하고 나서 그때 마다 유동적으로 변수의 타입을 결정하는 자유롭고 유연한 시스템.(ex/ Python,Javascript)

1. 변수의 타입들을 코드가 실행되는 도중에 결정함으로 우리가 직접 정의하지 않음
2. 변수의 타입이 하나로 고정되어있지 않으므로 아무 타입의 값이나 자유롭게 담을 수 있음.
3. 타입과 맞지 않는 메서드나 함수를 사용하면 해당 코드가 실행되지 않고 오류가 발생함.

 

타입스크립트는 정적 타입 시스템과 동적 타입 시스템을 합쳐서 만들어진 점진적 타입 시스템 언어이다.

점진적 타입 시스템은 모든 변수의 타입을 일일이 지정할 필요가 없는 시스템이다.

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

출처: Inflearn 한 입 크기로 잘라먹는 타입스크립트

[타입스크립트의 컴파일 과정]

컴파일이란?

프로그래밍 언어로 작성된 코드를 컴퓨터 시스템이 이해할 수 있도록 변환하는 과정을 컴파일링이라고 한다.

 

컴파일러의 컴파일 과정

1. 작성된 코드를 AST로 변환한다.

2. AST 코드를 바이트 코드 및 아스키 코드 등 컴퓨터가 읽을 수 있는 코드로 변환한다.

(*AST(추상 문법 트리) - 코드에 의미 없는 부분을 제외하고 저장하는 과정을 거치는 트리구조의 자료형태)

 

타입스크립트의 컴파일 과정

1. 작성된 코드를 AST로 변환된 이후 타입 검사를 진행한 후 JS로 변환한다.

2. 타입 검사 성공시 JS는 AST로 변환되고 바이트 코드로 변환된 후 실행이 되고 타입 검사 실패시 컴파일이 종료된다.

타입과 관련된 코드들은 컴파일 결과시에 모두 사라지므로 타입 검사에 오류가 발생되지 않는다.

[tsconfing.json, 컴파일러 옵션 설정하기]

명령어

npm init(npm init -y)

- nodeJS 패키지 초기화(-y는 모든 설정을 기본 설정으로 하겠다는 의미)

npm i @types/node

- 타입 정보를 갖고 있는 npm 라이브러리 설치

npm i typescript -g

- 타입스크립트 컴파일러(tsc(=typescript complier)) 설치

tsc {폴더}/{파일명}

- ts 파일 컴파일링

node {폴더}/{파일명}

- js 파일 실행

npm install ts-node -g

- tsc와 nodeJS가 함께 있는 컴파일링과 실행이 동시에 가능한 패키지 설치

ts-node {폴더}/{파일명}

- ts 파일 즉시 실행

tsc --init

- tsconfig.json 파일 자동 생성 명령어

 

tsconfig.json 초기 설정 및 속성 설명

{
  "compilerOptions": {
    "target": "ESNext", //최신 버전의 Javascript로 설정, ES버전에 따라 설정가능
    "module": "ESNext", //컴파일하는 파일의 모듈 옵션 설정,최신 버전의 Javascript로 설정,CommonJS나 ES사용 가능
    "strict": true, //엄격한 타입 검사 옵션, JS를 TS로 마이그레이션 하는 경우는 false로 설정해두기도 한다.
    "outDir": "dist", // 컴파일 한 파일들의 결과(.js)를 모아둘 파일
    "moduleDetection": "force"
    //타입스크립트는 기본적으로 모든 파일을 전역 모듈로 보기 때문에 각 파일을 독립적인 모듈로 인식하는 옵션
    //이 옵션이 아니라면 모든 ts 파일에 export {}; 를 마지막에 넣어주면 된다.
  },
  "include": ["src"] //컴파일 할 파일들이 있는 경로 설정
}

 

실행 오류

ts-node를 실행했을 때 다음과 같은 오류가 발생한다.

그 이유는 nodeJS에서 ESM 모듈 시스템을 사용하기 위해서는 package.json 파일에 "type": "module"을 입력해주어야 JS에서 ESM을 사용할 수 있었듯이 TS에서도 마찬가지로 입력해주어야 모듈을 설정해주어야 하기 때문이다.

다시 실행을 했을 때 또 오류가 발생한다.

ts-node를 사용할 때에는 tsconfig.json 파일에 "ts-node" : {"esm": true} 속성을 추가로 입력해주어야 한다.타입스크립트는 기본적으로 CJS를 사용하기 때문에 ESM을 이해하지 못하기 때문이다.

또한 tsc 명령어만 입력하여 ts 파일을 컴파일링한 후 원하는 dir에 컴파일한  파일을 넣는 작업을 처리했을 때 다음과 같은 오류가 발생하기도 한다.

@types 버전이 20버전 이상으로 업데이트되면서 특정 라이브러리에서 타입 검사 오류가 발생하는 것으로 compilerOption 내부에 "skibLibCheck": true 옵션을 추가 해 주어야 한다. 이 옵션은 타입 정의 파일(.d.ts 확장자를 갖는 파일을 의미)의 타입 검사를 생략하는 옵션이다. 보통 타입 정의 파일은 라이브러리에서 사용하는데 가끔 라이브러리의 타입 정의 파일에서 타입 오류가 발생하는 일이 발생할 수 있다. 따라서 해당 옵션을 true로 설정하여 불필요한 타입 정의 파일의 타입 검사를 생략하도록 설정해야 한다.
새로운 프로젝트를 진행하게 되어 tsconfig.json 파일을 생성하게 된다면 역시나 추가로 입력해주어야 하는 설정이다.
23년 10월 Node.js의 LTS(장기 지원 버전)가 20대로 업데이트 되며 ts-node가 정상적으로 동작하지 않기 때문에 ts-node tsx를 사용해야한다. 사용 방법은 동일하니 설치만 하면 되고  설치 이후에는 명령어에서 ts-node를 tsx로 대체해 주면 된다.
npm i -g tsx

 

- tsx 설치 명령어

tsx {폴더}/{파일명}

- ts-node를 대체하여 tsx 사용 명령어