TypeScriptでカスタムグローバルインターフェースを設定する方法

TypeScriptでカスタムグローバルインターフェース(.d.tsファイル)を設定する方法

手順

1. プロジェクトフォルダ内に*.d.tsファイルを作成します。ファイル名は自由ですが、一般的にはglobals.d.tsなど分かりやすい名前が推奨されます。
2. ファイル内にインターフェースを定義します。インターフェース名は、グローバルスコープで参照できる名前にしてください。
3. 必要に応じて、インターフェースにプロパティやメソッドを定義します。
4. TypeScriptコンパイラに*.d.tsファイルを認識させるために、tsconfig.jsonファイルに設定を追加します。

例

// globals.d.ts

interface MyGlobalInterface {
  name: string;
  age: number;

  greet(): void;
}

// tsconfig.json

{
  "compilerOptions": {
    "rootDir": "./",
    "outDir": "./dist",
    "lib": ["es6", "dom"],
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
  "include": ["./src/**/*.ts"]
}

上記の例では、globals.d.tsファイルにMyGlobalInterfaceというインターフェースを定義しています。このインターフェースは、nameとageというプロパティと、greetというメソッドを持っています。

tsconfig.jsonファイルには、typeRootsプロパティに./src/typesというディレクトリを追加しています。これは、TypeScriptコンパイラにglobals.d.tsファイルを認識させるための設定です。

注意事項

• *.d.tsファイルは、TypeScriptコンパイラによって直接コンパイルされません。
• *.d.tsファイルは、他のTypeScriptファイルからimportステートメントを使用して参照できます。
• *.d.tsファイルは、型定義のみを記述する必要があります。コードは記述できません。

関連キーワード

• typescript
• typescript-typings
• カスタムグローバルインターフェース
• .d.tsファイル
• tsconfig.json

globals.d.ts

// globals.d.ts

interface MyGlobalInterface {
  name: string;
  age: number;

  greet(): void;
}

index.ts

// index.ts

import { MyGlobalInterface } from "./globals";

const person: MyGlobalInterface = {
  name: "John Doe",
  age: 30,

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.greet();

実行結果

Hello, my name is John Doe!

このサンプルコードでは、globals.d.tsファイルにMyGlobalInterfaceというインターフェースを定義しています。そして、index.tsファイルでMyGlobalInterfaceインターフェースを実装したpersonという変数を宣言しています。

person.greet()メソッドを実行すると、Hello, my name is John Doe!という文字列が出力されます。

このサンプルコードは、TypeScriptでカスタムグローバルインターフェースを設定する方法を理解するのに役立ちます。

TypeScriptでカスタムグローバルインターフェースを設定するその他の方法

declareキーワードを使用して、グローバルスコープでインターフェースを直接宣言することができます。

// index.ts

declare interface MyGlobalInterface {
  name: string;
  age: number;

  greet(): void;
}

const person: MyGlobalInterface = {
  name: "John Doe",
  age: 30,

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.greet();

Hello, my name is John Doe!

この方法は、*.d.tsファイルを作成する必要がないため、簡潔に記述することができます。ただし、declareキーワードを使用して宣言されたインターフェースは、他のモジュールから参照することができません。

// globals.d.ts

declare module "ambient" {
  interface MyGlobalInterface {
    name: string;
    age: number;

    greet(): void;
  }
}

// index.ts

import { MyGlobalInterface } from "ambient";

const person: MyGlobalInterface = {
  name: "John Doe",
  age: 30,

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.greet();

Hello, my name is John Doe!

この方法は、*.d.tsファイルを作成する必要がなく、他のモジュールから参照することができます。

@typesディレクトリを使用して、サードパーティライブラリのカスタムグローバルインターフェースを定義することができます。

// @types/my-library/globals.d.ts

interface MyGlobalInterface {
  name: string;
  age: number;

  greet(): void;
}

// index.ts

import { MyGlobalInterface } from "@types/my-library";

const person: MyGlobalInterface = {
  name: "John Doe",
  age: 30,

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.greet();

Hello, my name is John Doe!

• 簡潔さを求める場合は、declareキーワードを使用する方法がおすすめです。
• 他のモジュールから参照できるインターフェースが必要な場合は、ambientモジュールを使用する方法がおすすめです。
• サードパーティライブラリのカスタムグローバルインターフェースを定義する場合は、@typesディレクトリを使用する方法がおすすめです。

• declare
• ambient
• @types