JavaScript 라이브러리 활용, 타입 정의 파일과 tsconfig.json 설정 - TypeScript #6

JavaScript 라이브러리를 TypeScript 환경에서 활용하는 방법을 정리합니다. 특히, tsconfig.json 설정, 타입 정의 파일(.d.ts), 그리고 DefinitelyTyped와 같은 자원을 통해 JavaScript와 TypeScript의 상호 운용에 대해 살펴봅니다.

JavaScript 코드에서 TypeScript 활용

 

반응형

JavaScript 코드에서 TypeScript 활용

  TypeScript 파일을 JavaScript 프로젝트에 통합하는 방법

TypeScript는 JavaScript의 상위 집합으로, JavaScript 코드와의 호환성이 뛰어납니다. 따라서 기존 JavaScript 프로젝트에 TypeScript를 통합하는 것은 매우 간단하게 이루어질 수 있습니다.

 

TypeScript 설정 파일(tsconfig.json) 추가하기

먼저, TypeScript를 사용하려면 프로젝트 루트 디렉터리에 `tsconfig.json` 파일을 추가합니다. 이 파일은 TypeScript 컴파일러 옵션을 설정하는 역할을 합니다. 예를 들어, 다음과 같은 `tsconfig.json` 파일을 작성합니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

 

  JavaScript 프로젝트에 TypeScript 파일 추가하기

기존 JavaScript 프로젝트의 `src` 디렉터리에 TypeScript 파일을 추가하여 사용할 수 있습니다. 예를 들어, `src/utils.ts` 라는 파일을 생성합니다.

// src/utils.ts
export function greet(name: string): string {
    return `Hello, ${name}!`;
}

 

 

  JavaScript 파일에서 TypeScript 파일 호출하기

JavaScript 파일에서도 TypeScript로 작성된 함수를 호출할 수 있습니다. 예를 들어, `src/index.js` 파일에서 다음과 같이 호출합니다.

// src/index.js
import { greet } from "./utils.js";

console.log(greet("World"));

 

 

  @ts-check를 사용하여 JavaScript 파일의 타입 체크하기

TypeScript는 JavaScript 파일에서도 타입 체크 기능을 제공할 수 있습니다. 파일의 맨 위에 `// @ts-check` 지시자를 추가하면 TypeScript 컴파일러가 타입 오류를 감지할 수 있습니다. 예를 들어:

// @ts-check

/**
 * @param {string} name
 * @returns {string}
 */
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet(42)); // 오류: Argument of type 'number' is not assignable to parameter of type 'string'.

 

위와 같이, JavaScript 프로젝트에서도 TypeScript의 강력한 타입 체크 기능을 부분적으로 활용할 수 있습니다.

 

 

TypeScript에서 JavaScript 라이브러리 사용하기

TypeScript 프로젝트에서 JavaScript 라이브러리를 사용하는 것은 일반적인 경우이며, 대부분의 경우 문제가 발생하지 않습니다. 하지만 TypeScript는 타입 안전성을 중요시하기 때문에 JavaScript 라이브러리를 사용할 때 타입 정보를 제공해야 할 수 있습니다.

 

  타입 정의 파일 (`.d.ts`)의 역할과 사용법

JavaScript 라이브러리를 TypeScript 프로젝트에서 사용하려면 해당 라이브러리의 타입 정의 파일(`.d.ts`)이 필요합니다. 예를 들어, `lodash` 같은 인기 있는 라이브러리는 별도의 타입 정의 파일을 제공하며, TypeScript 프로젝트에서 타입 검사를 제대로 하려면 해당 타입 정의 파일을 설치해야 합니다.

 

Lodash 라이브러리 사용하기

1. 프로젝트 폴더에서 `lodash` 라이브러리와 타입 정의 파일을 설치합니다.

npm install lodash
npm install --save-dev @types/lodash

 

2. TypeScript 파일에서 `lodash`를 불러와 사용합니다.

import _ from "lodash";

const numbers = [1, 2, 3, 4];
const doubled = _.map(numbers, n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

 

 

  DefinitelyTyped 라이브러리 활용 방법

많은 JavaScript 라이브러리들이 TypeScript 타입 정의를 기본으로 제공하지 않더라도, 커뮤니티에서 제공하는 타입 정의를 설치하여 사용할 수 있습니다. `DefinitelyTyped`는 전 세계 개발자들이 제공한 타입 정의 파일들이 모여 있는 저장소로, NPM에서 `@types/`로 시작하는 패키지 이름으로 설치할 수 있습니다.

npm install --save-dev @types/라이브러리이름

 

예를 들어, `express` 라이브러리의 타입 정의 파일을 설치하려면:

npm install express
npm install --save-dev @types/express

TypeScript에서 JavaScript 라이브러리를 안전하게 사용하기 위해 타입 정의 파일을 활용하는 것은 매우 중요한 단계입니다.

 

 

선언 파일 (DefinitelyTyped 활용)

  선언 파일 (`.d.ts`)의 구조 및 작성 방법

선언 파일(`.d.ts`)은 TypeScript에서 타입 정의가 제공되지 않는 라이브러리나 모듈을 사용할 때 타입 정보를 선언하기 위해 사용됩니다. 이 파일은 코드의 타입 검사를 가능하게 해 주며, 컴파일 타임에만 사용됩니다.

 

커스텀 선언 파일 작성하기

// src/types/myLibrary.d.ts
declare module "myLibrary" {
    export function sayHello(name: string): string;
}

 

TypeScript 프로젝트에서 사용되는 특정 라이브러리에 대해 타입 정의 파일을 작성할 때, 프로젝트의 `src/types` 디렉터리 안에 작성하는 것이 좋습니다.

 

NPM에서 제공되는 `@types/` 패키지를 설치하면, 많은 라이브러리의 타입 정의를 쉽게 사용할 수 있습니다. 설치된 타입 정의 파일은 자동으로 TypeScript 컴파일러가 인식합니다. 이와 같이 TypeScript와 JavaScript의 상호 운용성을 효과적으로 다룰 수 있습니다.