[TypeScript] 개발환경 구축 / tsc컴파일러

*컴파일러: 타입 검사를 해주는 녀석

타스의 tsc 컴파일러는 소스 코드의 정적 타입 검사를 수행해서 자스 코드로 변환을 해줌 (C언어 컴파일러는 기계어 코드로 변환해줌).

 

여기서 자스는 기계어로 따로 변환될 필요가 없는데, 자스는 동적 언어(=인터프리터 언어)기 때문임.

Node.js나 크롬은 자스 실행시 V8 엔진이 코드를 해석 및 실행해주고, 같은 개념으로 파이어폭스 역시 SpiderMonkey가 코드를 해석하고 실행시켜줌. 그래서 동적으로 한줄씩 실행하다 에러가 나면 그게 바로 런타임 에러인 것.

 

타스 플젝 시작하기:

tsc --init 으로 tsconfig.json 파일 생성

이때, compilerOptions를 설정해줘야 하는데,

1. target 옵션의 경우 최신 브라우저는 보통 ES6를 지원하니, 그 후 버전을 설정하고,
2. module 옵션은 타스 파일을 컴파일 하고 생성되는 자스 모듈의 형식을 지정함.
3. outDir 옵션은 컴파일된 자스 파일이 저장될 출력 디렉터리를 지정함. (예: "outDir": "dist" or "bin")
4. strict 옵션은 엄격한 타입 검사 옵션을 모두 활성화 함.
5. sourceMap은 자스 실행 중 에러 발생했을 때 원래 타스 소스 코드의 위치를 확인할 수 있음 = 디버깅 수월해짐 (개발환경에서 true 권장//프로덕션 환경에선 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수도 있다 함)
6. include, exclude 옵션은 tsc가 컴파일 할 때 포함하거나 제외할 파일/디렉터리를 지정하는 옵션임
   • "include": ["src/**/*"] 하면 src 디렉토리 밑의 친구들을 컴파일 한다는 의미
   • "exclude": ["node_modules", "dist"]는 node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미 (외부 파일이니까)

타스는 @types 라이브러리를 통해 외부 라이브러리(ie. js라이브러리들)에 대한 타입 정보를 제공함.

자세하게는, .d.ts파일로 타스 컴파일러는 외부 라이브러리의 함수, 클래스, 객체 타입 정보를 알 수 있음.

추가로 d.ts파일로 외부 라이브러리의 타입 추론도 가능한데, 타입이 명시되지 않았을 때 컴파일러가 알아서 해당 타입에 대한 추론을 하는 것임.

 

---

• 개발환경 구축을 위해 우선 파일을 하나 생성 후 npm init -y ; tsc --init 해줌
• 이후 tsconfig.json에서 아래의 주석을 해제시켜줌
  • "allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
  • "checkJs": true // JavaScript 파일 타입 체크 여부
• 타스에서 사용하고자 하는 자스 라이브러리를 test.js로 만들고,

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}

• JSDoc으로 타입 힌트가 제공된 test.js의 .d.ts파일을 만듦:
  • npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types
• types/test.d.ts 파일 내 똑같이 자스 라이브러리의 타입이 생성되는데:

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a: number, b: number): number;

• 이 test.js파일을 참조할 foo.ts 파일을 새로 만들고 npx ts-node foo.ts 실행하면 정상 작동하여 3을 반환함

import { add } from "./test";
console.log(add(1, 2));

 

 

 

 

출처: 스파르타코딩클럽