tsc, tsconfig.json 파일, .d.ts 파일

tsc = TypeScript 컴파일러

JavaScript는 동적 언어(=인터프리터 언어)이기 때문에 기계어로 변환될 필요가 없음

• 정적 언어(=컴파일 언어) → 기계어로 변환이 되어야 합니다! 
• 동적 언어(=인터프리터 언어) → 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석합니다!
  
  • Node.js나 Chrome → JavaScript를 실행할 때는 V8 엔진이 코드 해석 및 실행을 하구요!
  • Firefox → JavaScript를 실행할 때는 SpiderMonkey가 코드 해석 및 실행을 합니다!

 

tsc 명령어

• tsc --init
  tsconfig.json이 생성되는 명령어
• tsc index.ts
  index.ts를 컴파일.
  .ts는 TypeScript 파일의 확장자
• tsc src/*.ts
  src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일
• tsc index.js --declaration --emitDeclarationOnly
  @types 패키지를 위한 .d.ts 파일 생성을 하는 명령.
  TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 유용
• 기타 자세한 명령어 옵션: https://www.typescriptlang.org/docs/handbook/compiler-options.html

 

---

tsconfig.json 파일

TypeScript 프로젝트의 설정 파일로, tsc --init 명령을 실행하면 생성됨.

주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용됨

 

옵션 메뉴얼

https://www.typescriptlang.org/ko/tsconfig

 

권장 설정⭐

• compilerOptions - strict옵션은 true로 설정
• compilerOptions - sourceMap옵션은 개발 환경에서 true로 설정

 

주요 옵션

compilerOptions - target 옵션

• 해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션
• es5 로 설정하면 CommonJS 버전으로 컴파일. 레거시한 환경에서 동작해야 하는 경우 사용
• es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일 됨(추천). 최신 브라우저

 

compilerOptions - module 옵션

• TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정함
• 모듈을 가져오고 내보내는 방식을 결정하는 옵션

 

compilerOptions - outDir 옵션

• 엄격한 타입 검사 옵션을 모두 활성화하는 옵션으로, TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있어요.
• true로 설정하시는 것을 권장
• true로 설정 시 아래의 옵션들이 자동으로 true로 설정이 되어요.
  
  • strictNullChecks: 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션이에요!
  • strictFunctionTypes
  • strictBindCallApply
  • strictPropertyInitialization
  • noImplicitAny: 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록 해요. 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있죠!
  • noImplicitThis
  • alwaysStrict

 

compilerOptions - sourceMap 옵션

• 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션이에요!
• 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있죠.
• 코드 디버깅에 매우 큰 도움이 되기 때문에 개발 환경에서는 꼭 true로 설정하시는 것을 권장드려요.
• 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있어요!

 

include , exclude 옵션

• tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션이에요!
• “include": ["src/**/*"]
  src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미에요!
• "exclude": ["node_modules", "dist"]
  node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미에요!

 

---

.d.ts 파일

TypeScript 타입 정의 파일.  즉, JavaScript 라이브러리에 대한 타입 정보를 제공함

• 외부 라이브러리의 함수 타입 정보
• 외부 라이브러리 클래스 타입 정보
• 외부 라이브러리 객체 타입 정보

뿐만 아니라, .d.ts 파일로 외부 라이브러리의 타입 추론도 할 수 있습니다.

타입 추론이란 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것입니다.

 

JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 함.

TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공.

@types에 있는 디렉토리에 내부로 들어가면 .d.ts 파일들을 볼 수 있음

 

JavaScript 라이브러리를 TypeScript에서 쓰려면?

라이브러리에 대한 .d.ts 파일만 제공을 해주면 됨

TypeScript 프로젝트에서도 JavaScript 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있다