JavaScript 컴포넌트 문서화를 위한 TypeScript 선언 파일 사용

TypeScript 선언 파일을 JavaScript와 함께 사용하는 방법

JavaScript 함수 문서를 TypeScript .d.ts 파일로 분리하려는 경우, 이 가이드를 통해 프로세스를 안내합니다. TypeScript 선언 파일을 JavaScript와 함께 사용하여 코드에 대한 더 나은 타입 체크와 문서 작성을 보장할 수 있습니다.

프로젝트 설정하기

먼저 프로젝트에 tsconfig.json 파일이 있는지 확인하세요. tsconfig.json 파일의 “include” 속성을 수정하여 .d.ts 파일의 경로를 포함시킵니다. 예를 들어, 컴포넌트가 src 디렉토리에 위치한 경우, 다음과 같이 “include” 속성을 업데이트합니다:

{
  "compilerOptions": {
    "declaration": true,
    "rootDir": "./src",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "noEmit": true,
    "maxNodeModuleJsDepth": 2
  },
  "include": ["src/**/*.d.ts"]
}

.jsx와 .d.ts 파일이 동일한 파일 이름을 가지고 같은 디렉토리에 위치하도록 확인하세요. 예를 들어, Button 컴포넌트에 Button.jsx와 Button.d.ts가 있다면, 같은 디렉토리에 위치해야 합니다.

선언 파일 사용하기

JavaScript 코드에서 선언 파일을 사용하려면, 컴포넌트를 일반적으로 가져오듯이 import하면 됩니다. 예를 들어:

import Button from './components/Button/Button';

const b1 = Button({
    text: '123',
    onClick: () => {
        console.log('here');
    },
});

const b2 = Button({
    text: 123, // 실패 - 문자열이 아닙니다.
    onClick: () => {
        console.log('here');
    },
});

선언 파일이 준비되었다면, JavaScript 코드에서 컴포넌트의 속성에 대한 타입 체크와 자동 완성을 제공받을 수 있습니다.

라이브러리로서 제공하기

코드를 라이브러리로 제공하려면, package.json 파일을 업데이트해야 합니다. “typings” 속성을 추가하고 index.d.ts 파일의 경로로 설정하세요. 예를 들어:

{
  ...,
  "typings": "index.d.ts",
  ...
}

index.d.ts 파일에서 다른 파일에서 선언된 인터페이스 및 타입을 내보낼 수 있습니다. 예를 들어:

/// <amd-module name="package-name" />
export * from './other-files-with-declarations';

결론

TypeScript 선언 파일을 JavaScript 코드와 함께 사용하여 개발 워크플로우를 개선할 수 있습니다. TypeScript의 강력한 타입 체크 및 문서 작성 기능을 활용하여 코드 유지 관리, 협업 개선, 런타임 오류 감소를 할 수 있습니다. 프로젝트에 TypeScript 선언 파일을 올바르게 설정하고 사용하기 위해 이 가이드의 단계를 따르도록 합니다.

참고 자료 : 

reactjs