24.03.06 TIL - Typescript(2)

1. 컴파일러, tsc

컴파일러는 프로그래밍 언어로 작성된 소스코드를 다른 프로그래밍 언어로 변환하는 도구이다. 컴퓨터는 기본적으로 기계어로 작성된 프로그램만 이해할 수 있기에 사람이 작성한 것을 컴퓨터가 이해하게 변환하기 위해 컴파일러가 등장했다.

 

Javascript는 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석하기에 동적언어(=인터프리터 언어)이고, 이를 정적 언어(=컴파일 언어)인 Typescript로 변환하는 것이 컴파일러인 tsc의 역할인 것이다.

 

• ts 컴파일러는 소스코드의 정적 타입 검사를 수행한다. 이를 통해 개발자는 코드에서 타입 관련 오류를 미리 발견하고 수정할 수 있게 된다.
• 그리고 코드 변환도 해주는데, 컴파일러인 tsc는 ts -> js 코드변환을 해주고 이를 이해한다면 변환된 코드가 어떻게 실행되는지 예측할 수 있어 디버깅에 도움이 된다.
• 최종적으로는 최적화도 해줘서 전반적인 어플리케이션의 실행시간이 더 빨라지기도 한다.
• 컴파일러는 에러메시지를 출력하는데, 보다 정확하게 문제를 해석하고 해결할 수 있게 해준다.

 

2. tsconfig.json 해부하기

tsc -- init 명령을 실행하면 생성되는 파일인데 Typecript 프로젝트의 설정파일이라고 생각하면 된다. 주로 컴파일 옵션 및 입력파일들을 정의하는 데 사용된다.

• compilerOptions - strict 옵션은 true로 설정하는 것이 좋다.
• compilerOptions - sourceMap 옵션은 개발환경에서 true로 설정하는 것이 좋은데, 소스맵을 사용하면 실행 중에 에러가 발생했을 때 원래 ts 소스코드의 위치를 확인할 수 있어 디버깅에 크 도움이 된다. 하지만 프로덕션 환경에서는 용량이나 성능상의 이유로 사용하지 않는 것이 좋을 때도 있다.
• compilerOptions - target 옵션은 어떤 js 버전으로 변환할 지 정하는 옵션인데, js에서 type=module을 설정하는 것과 비슷하게 es5로 설정하면 CommonJS 버전으로 컴파일되고 es2016(=es7)로 설정하면 ES2016 버전으로 된다.
• compilerOptions - module 옵션은 모듈을 가져오고 내보내는 방식을 결정하는 옵션이다. target 옵션과는 서로 독립적인 관계이니 프로젝트 요구사항에 따라 설정할 것
• compilerOptions - outDir 옵션은 컴파일된 Javascript 파일이 저장될 출력 디렉토리를 지정한다. 예를 들어 "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장된다.

 

3. d.ts 파일 알아보기

.d.ts 파일은 JS라이브러리도 TS 코드에서 사용할 수 있게 해준다. Typescript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공한다. 그리고 .d.ts 파일은 Typescript 타입 정의 파일이고, 외부 라이브러리의 함수 타입 정보, 클래스/객체 타입 정보 등을 알 수 있다. 뿐만 아니라, 외부 라이브러리의 타입이 명시되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론하는 타입추론도 가능케 한다.

 

Javacrit 라이브러리를 Typescript에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공하면 수정 없이 그대로 쓸 수 있다.

아래는 d.ts를 사용하는 방법을 설명하기 위한 예시이다.

 

1.  npm init -y
2. tsc --init
3. tsconfig.json을 열어서 "allowJs": true, "checkJs": true를 주석해제 해준다.

   4. JSDoc으로 타입힌트가 제공된 test.js의 .d.ts 파일을 만든다. 다음 명령어를 입력하면 된다.

npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types

 

   5. types/test.d.ts 파일을 확인하면 다음과 같이 생성이 되어 있을 것이다.

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

 

위의 예시의 주석문은 JSDoc라고 하는데, API의 시그니처(인자, 리턴 타입)를 성명하는 HTML 문서 생성기다. JSDoc으로 JS 소스코드에 타입 힌트를 제공할 수 있다.  

 

 

   6. test.js 파일을 참조할 foo.js 파일을 만든다.

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

 

   7. foo.js를 싱행시킨다.

npx ts-node foo.ts