TypeScript에서 유형 선언 파일이란 무엇입니까?

이 게시물은 시리즈 및 book about TypeScript의 일부입니다. 백 엔드 및 프런트 엔드에서 전체 TypeScript 애플리케이션을 처음부터 작성하도록 안내합니다. 이 시리즈는 모든 사람이 무료로 PDF 전자책으로 사용할 수 있습니다.



이전에 일부 JavaScript 또는 TypeScript 프로젝트(라이브러리 또는 프레임워크)에서 .d.ts와 같은 파일 확장자를 가진 파일을 보았고 이러한 파일이 무엇이며 용도가 무엇인지 궁금했을 것입니다. TypeScript에서는 Type Declaration 파일이라고 합니다. 그것이 실제로 무엇인지 알아 봅시다.

TypeScript 코드로 간단한 예제를 만들어 봅시다. typescript-type-defs 또는 원하는 이름으로 폴더를 만든 다음 코드를 사용하여 users-list.ts라는 파일을 만듭니다.

const users = [
  {
    id: "1",
    name: "John",
    username: "johnsmith11",
    age: 55,
    level: 23,
  },
  {
    id: "2",
    name: "C3PO",
    username: "iamnotrobot",
    age: 112,
    level: 1,
  },
];

export const NAME_FIELD_KEY: keyof User = "name";

interface User {
  id: string;
  name: string;
  username: string;
  age: number;
  level: number;
}

export function getEntityField<Entity>(
  entities: Entity[],
  fieldName: keyof Entity
): unknown[] {
  return entities.map((entity) => entity[fieldName]);
}

export function getUsersName(users: User[]): string[] {
  return getEntityField(users, NAME_FIELD_KEY) as string[];
}

const result = getUsersName(users);

console.log(result);

다른 곳에서 인터페이스 사용자를 사용해야 하는 경우 어떻게 해야 합니까? 문제 없습니다. 인터페이스 앞에 export를 추가하십시오.

export interface User {
  id: string;
  name: string;
  username: string;
  age: number;
  level: number;
}

다른 모듈의 모듈 사용자 목록에서 이 인터페이스를 가져올 수 있습니다. 그러나 때때로 우리는 이 인터페이스를 여러 모듈 사이의 공통 사항으로 사용해야 합니다. 따라서 이러한 모듈 중 하나에서 인터페이스를 내보내는 것은 옵션이 아닙니다. 인터페이스 사용자를 지정하고 모듈에서 사용할 수 있는 특수 파일을 만들어야 합니다.

이름이 typings.d.ts인 파일을 만들고 인터페이스 User를 users-list.ts 파일에서 이 새 파일로 이동했습니다.

export interface User {
  id: string;
  name: string;
  username: string;
  age: number;
  level: number;
}

이제 모듈 사용자 목록에서 이 인터페이스를 사용해야 합니다. typings.d.ts에서 이 인터페이스를 가져올 수 있습니다.

import { User } from "./typings";

// ...

export const NAME_FIELD_KEY: keyof User = "name";

// ...

export function getUsersName(users: User[]): string[] {
  return getEntityField(users, NAME_FIELD_KEY) as string[];
}

// ...

파일 typings.d.ts를 더 살펴보겠습니다. 이 파일에는 TypeScript/JavaScript의 변수, 함수 및 기타 코드를 작성할 수 없습니다. 작성할 수 있는 것은 유형 또는 인터페이스뿐입니다. 거기에서만 유형을 정의하고 모든 모듈에서 사용할 수 있습니다.

일반적으로 유형은 .d.ts가 아니라 .ts 파일에 작성합니다. 그러나 .d.ts 파일은 패키지 또는 라이브러리이며 원래 JavaScript로 작성된 프로젝트에서 사용됩니다. JavaScript 라이브러리가 있고 TypeScript 프로젝트에서 라이브러리를 사용할 수 있는 기능을 추가해야 하는 경우 .d.ts 파일을 만들어야 합니다. 또 다른 경우는 라이브러리를 TypeScript로 작성했지만 컴파일된 JavaScript 코드로 제공하는 경우입니다. 이 경우 TypeScript 컴파일러(tsc)를 사용하여 TypeScript 소스 코드를 기반으로 유형 선언을 자동으로 생성할 수 있습니다.

다음은 users-list.ts를 기반으로 한 예입니다. tsc를 사용하여 유형 선언 파일을 생성해 보겠습니다.

tsc users-list.ts --declaration

그런 다음 다음 코드가 포함된 users-list.d.ts라는 새 파일이 표시됩니다.

import { User } from "./typings";
export declare const NAME_FIELD_KEY: keyof User;
export declare function getEntityField<Entity>(entities: Entity[], fieldName: keyof Entity): unknown[];
export declare function getUsersName(users: User[]): string[];

따라서 해당 유형 선언 파일을 사용하면 프로젝트에서 라이브러리를 사용하는 사람에게 라이브러리의 API 및 유형으로 작업할 수 있는 기능을 제공할 수 있습니다.

많은 라이브러리 및 패키지에 대한 유형 정의를 포함하는 거대한 저장소가 있습니다 - DefinitelyTyped . "@types/*"와 같은 이름으로 패키지를 설치했을 수 있습니다npm. 이러한 패키지 중 일부의 코드는 이 저장소에 있습니다.

재료가 마음에 드십니까? subscribe to my email newsletter에서 최신 정보를 확인하십시오.