TypeScript 공부(9)

타입스크립트 모듈 개념

import _ from 'lodash'

const str = 'the brown fox jumps over the lazy dog.'

console.log(_.camelCase(str))
console.log(_.snakeCase(str))
console.log(_.kebabCase(str))

만약 타입스크립트에서 lodash라는 모듈을 사용하기 위해 npm i lodash를 설치하여 사용을 하려고 해봅시다.

그런데 여기서 오류가 발생을 합니다. 해당 모듈을 찾을 수 없다는 오류가 나게 되는데 여기서 해결방법은 src폴더에서 lodash.d.ts 라는 파일을 만들어줍니다.

lodash.d.ts라는 파일은 dts파일로 자바스크립트에서 사용가능한 모듈이나 라이브러리들은 타입스크립트로 작성되어 있지 않기 때문에, 이런 경우 타입스크립트에서 라이브러리를 사용할 때 타입 정보를 제공해주지 않으면 타입 검사를 할 수 없고, 따라서 안정성을 보장할 수 없습니다. 이러한 경우를 대비하여 d.ts 파일을 사용하여 타입 정보를 제공해줌으로써, 타입스크립트 코드에서 안전하게 사용가능하게 됩니다.

lodash.d.ts

declare module "lodash" {
  interface Lodash {
    camelCase: (str: string) => string
    snakeCase: (str: string) => string
    kebabCase: (str: string) => string
  }
  const _: Lodash
  export default _
}

우선 declare module lodash 부분은 타입스크립트에게 lodash 라는 모듈이 있다는 것을 알려주는 것입니다.
그리고 interface를 작성하여 실제로 lodash에서 사용할 기능(메서드들)을 타입스크립트에게 설명해주는 역할을 합니다.

이런식으로 camelCase,snakeCase,kebabCase 를 정의해주고, 실제로 ts 파일에서 아래와 같이 사용할 수 있습니다.

import _ from 'lodash'

const str = 'the brown fox jumps over the lazy dog.'

console.log(_.camelCase(str))
console.log(_.snakeCase(str))
console.log(_.kebabCase(str))

하지만 이런식으로 모듈을 사용할때마다 dts파일을 작성해주는 것은 힘들기 때문에 npm을 통해서 확인하는 방법도 있습니다.

npm info @types/lodash를 통해 해당 모듈이 타입스크립트를 지원하는지 확인하고, 만약 해당 모듈이 타입스크립트를 지원하고 있다면, npm i @types/lodash -D 를 통해 설치를 해주면, dts파일을 작성할 필요 없이 해당 모듈을 사용할 수 있습니다.

tsconfig.json 구성 옵션

타입스크립트 프로젝트를 시작하면 tsconfig라는 json 파일을 만들어서 제공해야 합니다.

이때 사용되는 옵션들이 어떠한 종류가 있는지 알아보도록 하겠습니다. 크게 3가지 옵션으로 구분 할 수 있습니다.

compilerOptions

compilerOptions는 만들어진 타입스크립트 코드를 자바스크립트로 변환하기 위해서 어떤 옵션들이 세부적으로 필요한지 결정해주는 옵션이라고 할 수 있습니다. 이 옵션에선 여러가지 옵션들이 추가될 수 있는데 하나씩 살펴보겠습니다.

• target: TypeScript 코드가 컴파일될 ECMAScript 버전을 지정합니다. 예를 들어, "es5", "es6", "es2015", "es2020" 등을 사용할 수 있습니다. 쉽게 말해서, 타입스크립트를 자바스크립트로 컴파일할 때 어떤 버전으로 변환을 시킬 건지를 명시할 수 있습니다. 기본 옵션으로는 "es3" 입니다. 하지만 가장 많이 사용되는 옵션은 "es2015" 버전입니다.

• module: 모듈 시스템을 지정합니다. 예를 들어, "commonjs", "esnext", "amd", "system" 등이 있습니다. 우리가 자바스크립트를 쓰는 환경은 크게 2 가지로 나뉩니다. 웹 브라우저와, Node.js 환경이 있습니다. Node.js 환경에서는 "commonjs" 방식의 모듈 시스템을 사용하고, 웹 브라우저 환경에서는 "esnext" 방식의 모듈 시스템을 사용합니다. 기본값은 "commonjs" 입니다.

• moduleResolution: 모듈 해석 방식을 지정하는 옵션입니다. 기본값은 "Node.js"입니다. 그 외에는 "Classic" 등이 있습니다.

• esModuleInterop: CommonJS와 ES Module 간의 상호 운용성을 허용합니다. import 구문으로 CommonJS 모듈을 가져올 수 있게 합니다. 되도록 이 옵션은 true로 해두는 것을 추천합니다.

• isolateModules: 모든 파일을 모듈로 컴파일합니다. import 혹은 export 키워드가 필수적으로 필요합니다.

• lib: 컴파일에서 사용할 라이브러리 지정하는 옵션입니다. 예를 들어, "esnext", "dom" 등이 있습니다. 타입스크립트를 자바스크립트로 컴파일 할 때, 필요한 내부 라이브러리를 설정할 수 있습니다. 기본적으로는 "esnext" 즉 자바스크립트의 최신 버전에 해당하는 내용과 우리는 대부분의 경우에 브라우저에서 동작할 수 있는 자바스크립트를 다룰 거기 때문에 타입스크립트가 브라우저의 dom에 해당하는 내용도 이해할 수 있도록 라이브러리를 제공할 수 있습니다.

• strict: 엄격한 타입 검사를 활성화합니다. true로 설정하면 여러 엄격 모드가 활성화됩니다(strictNullChecks, strictFunctionTypes 등).

• outDir: 컴파일된 파일이 저장될 디렉토리를 지정합니다.

• rootDir: 입력 파일의 루트 디렉토리를 지정합니다. 이 설정을 통해 프로젝트 구조를 유지하면서 컴파일된 파일이 올바른 위치에 저장되도록 할 수 있습니다.

• sourceMap: 소스 맵 파일을 생성합니다. 디버깅 시 원본 TypeScript 파일과 매핑되어 개발자 도구에서 원본 코드를 볼 수 있습니다.

include

어떤 타입스크립트의 파일들을 컴파일해서 자바스크립트로 변환할 것인지 그 파일에 대한 경로가 어디에 있는지 배열 데이터로 목록화 해서 제공을 하는 옵션입니다.

즉, 컴파일할 파일이나 디렉토리를 지정합니다. 예를 들어, "src/**/*"은 src 디렉토리 내 모든 파일을 포함합니다. 그렇다면 "src/**/*.ts"는 src 디렉토리 내 모든 ts 파일을 자바스크립트로 컴파일 하겠다 라고 설정을 해주는 것 입니다.

exclude

exclude 옵션 같은 경우에는 최종적으로 자바스크립트로 컴파일 할 때, 필요한 경우를 제외하려는 파일이나 폴더의 경로를 명시하는 곳입니다. 즉, 컴파일에서 제외할 파일이나 디렉토리를 지정해주는 옵션입니다.

예를들어, "node_modules", "dist"등을 사용할 수 있습니다.