TypeScript

[TypeScript] 개요

이경욱 2023. 12. 19. 09:12

컴파일러란?

1. 타입검사

2. 에러메시지 해석할 때 도움

3. 코드변환 (tsc: TypeScript > JavaScript)

4. 최적화 

 

 

 

tsc란?

tsc = TypeScript 컴파일러

TypeScript는 JavaScript로 변환되어야 코드를 실행할 수 있다.

정적언어 (=컴파일 언어)는 기계어로 변환이 되어야 한다.

동적언어 (=인터프리터 언어)는 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석합니다.

 

그래서 동적언어는 오류가 나면 런타임에러가 나는 것이고

정적 언어는 실행 전 사전에 기계어로 변환을 하는 과정에서 오류를 잡아낼 수 있는 것이다.

 

 

 

tsc 명령어

tsc --init
// tsconfig.json이 생성되는 명령어

tsc index.ts
// index.ts를 컴파일

tsc src/*.ts
// src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일

tsc index.js --declaration --emitDeclarationOnly
// @types 패키지를 위한 .d.ts 파일 생성 명령어

 

 

 

tsconfig.json 옵션 설정

"strict": true,
"noImplicitAny": true,
"strictNullChecks": true, //null이 될 수 있는 값에 확인하는 옵션
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true, //함수의 인자 또는 변수의 타입이 선언되지 않은 경우 any 타입을 부여하지 않도록 설정
"alwaysStrict": true,

"sourceMap": true, 
// 실행 중 에러 발생 시 TypeScript 소스 코드 위치 확인
// 개발환경에서 코드 디버깅에 유용하기에 true / 배포 시 false

 

tsconfig.json 파일에서 

위 옵션들을 주석을 풀어 켜주게 된다면

보다 엄격한 타입 검사를 할 수 있게된다.

 

 

 

프로젝트 세팅

1. npm init -y

2. tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

3. tsconfig.json의 script 항목을 다음과 같이 변경
"scripts": {
    "start": "tsc && node ./dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
},

4. 최상위 root에서 src폴더 생성