TypeScript의 tsconfig.json 파일 살펴보기

컴파일된 자바스크립트 코드 ECMAScript 버전을 설정합니다. 예를 들어, es5, es6, es2015, esnext 등의 값을 지정할 수 있습니다. 최신문법을 작성해도 es5로 컴파일한다면 예전 문법으로 변경됩니다.

무슨 import 문법 쓸건지 설정합니다. commonjs, amd, es2015, esnext등이 있습니다.

// esnext
import abc from "./abc";

true일 경우 js 파일들을 ts 파일에서 import해서 쓸 수 있습니다.

자바스크립트 파일을 타입 검사합니다.

tsx 파일을 jsx로 어떻게 컴파일할 것인지 설정합니다. 5가지의 옵션이 존재합니다. 보통 preserve를 사용합니다.

• react : .js 파일로 컴파일 (JSX 코드는 React.createElement() 함수의 호출로 변환된다)

• react-jsx : .js 파일로 컴파일 (JSX 코드는 _jsx() 함수의 호출로 변환된다)

• react-jsxdev : .js 파일로 컴파일 (JSX 코드는 _jsx() 함수의 호출로 변환된다)

• preserve : .jsx 파일로 컴파일 (JSX 코드가 그대로 유지된다)

• react-native : .js 파일로 컴파일 (JSX 코드가 그대로 유지된다)

// Original TypeScript Sample Code
export const helloWorld = () => <h1>Hello world</h1>;

// Default: "react"
export const helloWorld = () => React.createElement("h1", null, "Hello world");

// React 17 transform: "react-jsx"
import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);

// React 17 dev transform: "react-jsxdev"
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName =
  "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx";
export const helloWorld = () =>
  _jsxDEV(
    "h1",
    { children: "Hello world" },
    void 0,
    false,
    { fileName: _jsxFileName, lineNumber: 7, columnNumber: 32 },
    this
  );

// Preserve: "preserve"
export const helloWorld = () => <h1>Hello world</h1>;

// React Native: "react-native"
export const helloWorld = () => <h1>Hello world</h1>;

컴파일시 .d.ts 파일도 자동으로 함께생성됩니다. .d.ts 파일이란

.d.ts는 TypeScript Definition 파일의 확장자입니다. TypeScript는 JavaScript의 상위 집합 언어로 정적 타입 검사, 클래스, 인터페이스 등의 기능을 제공합니다. 하지만 TypeScript로 작성된 코드를 JavaScript로 컴파일하면 타입 정보가 사라지기 때문에 다른 개발자들이 TypeScript 코드를 사용하기 어렵습니다. 이때, .d.ts 파일을 사용하면 TypeScript 코드에서 선언한 타입 정보를 코드 외부에 따로 저장하여 다른 개발자들이 TypeScript 코드를 사용할 때 유용하게 사용할 수 있도록 합니다. 이 파일은 주로 외부 라이브러리에서 제공되며, TypeScript에서 해당 라이브러리를 사용할 때 필요합니다.

컴파일시 주석을 제거해줍니다.

컴파일된 자바스크립트 파일의 출력 디렉토리를 설정합니다.

컴파일된 자바스크립트 파일을 생성하지 않습니다.

TypeScript 프로젝트에서 모듈을 로드할 때 모듈 이름을 해석하는 기준 경로를 지정하는 옵션입니다. baseUrl을 설정하면 상대 경로로 모듈을 로드하는 대신, 절대 경로로 모듈을 로드할 수 있습니다.

// tsconfig.json
"baseUrl": "./src",


// abc/foo.js
import zxc from '../src/zxc' // 이 방식 대신
import zxc from 'zxc' // 절대경로 사용가능

strict 옵션은 TypeScript에서 제공하는 여러 개의 타입 체크 옵션을 모두 활성화하는 옵션입니다. strict 옵션을 true로 설정하면 다음과 같은 타입 체크 옵션이 활성화됩니다.

• noImplicitAny: 암묵적 any를 사용할 수 없게 됩니다.

• strictNullChecks: null 또는 undefined이 될 수 있는 값에 대해 엄격하게 체크합니다.

• strictFunctionTypes: 함수 타입의 매개변수와 반환 값에 대해 엄격하게 체크합니다.

• strictPropertyInitialization: 클래스의 프로퍼티가 초기화되지 않았다면 오류를 발생시킵니다.

• noImplicitThis: this 키워드의 타입이 암묵적 any로 처리되는 것을 막습니다.

strict 모드를 사용하면 코드의 안정성을 높일 수 있으며, 타입 오류를 미리 방지할 수 있습니다. 하지만 코드 작성 시 더 많은 주의가 필요하며, 타입 오류를 조금 더 자세하게 해결해야 할 수도 있습니다. 따라서 프로젝트의 규모와 성격에 따라 strict 모드를 사용할 지 결정해야 합니다.

skipLibCheck 옵션은 TypeScript 컴파일러가 .d.ts 파일을 타입 체크하지 않도록 설정하는 옵션입니다. .d.ts 파일은 보통 외부 라이브러리나 프레임워크에서 제공하는 타입 선언 파일입니다.

일반적으로 .d.ts 파일은 이미 타입 체크가 이루어져 있으므로, TypeScript 컴파일러가 다시 타입 체크를 하지 않도록 skipLibCheck 옵션을 사용합니다. 이 옵션을 사용하면 컴파일 시간이 줄어들어 빌드 속도를 높일 수 있습니다.

하지만 외부 라이브러리나 프레임워크에서 제공하는 .d.ts 파일이 잘못된 타입을 선언하거나 누락된 타입이 있을 수 있으므로, skipLibCheck 옵션을 사용하기 전에 신중하게 검토해야 합니다.