Gizanbeak

この記事ではTypeScriptのアンビエント宣言（declare）についてわかりやすく解説していきます。

アンビエント宣言って何？

まずは、アンビエント宣言について簡単に説明します。

TypeScriptのアンビエント宣言は、既存のJavaScriptライブラリやモジュールがTypeScriptで 型付けされていない場合にその型を定義する ために使用されます。
アンビエント宣言を使うと TypeScriptコンパイラは型チェックを実行できる ようになり、開発者の皆さんは安心してコードを書くことができますね。

例えば次のようなJavaScriptコードがあるとします。

function greet(name) {
  return `Hello, ${name}!`;
}

TypeScriptでこの関数を使いたい場合、次のようにアンビエント宣言を追加できます。

declare function greet(name: string): string;

これでTypeScriptコード内で greet 関数を使用する際に型チェックが行われるようになりました！

型定義ファイル（.d.ts）について

型定義ファイル（.d.ts）は、TypeScriptの アンビエント宣言をまとめるための専用のファイル です。

型定義ファイルを使うことで型定義をモジュール化し、他のプロジェクトで再利用できるようになります。

例えば、先ほどの greet 関数の型定義を greet.d.ts というファイルにまとめることができます。

// greet.d.ts
declare function greet(name: string): string;

そして、この型定義ファイルを以下のようにインポートすることで greet 関数をTypeScriptで安全に使用できます。

// main.ts
/// <reference path="greet.d.ts" />

console.log(greet("John")); // Output: Hello, John!

型定義ファイルの作成と活用

型定義ファイルを作る方法はいくつかありますが、今回は一番シンプルな方法を紹介します。

まずは、型定義ファイル（.d.ts）を作成しましょう。
例えば sample.d.ts というファイルを作ります。

次に、アンビエント宣言を記述します。
次のようなJavaScript関数があるとします。

function sum(a, b) {
  return a + b;
}

この関数の型定義を sample.d.ts に追加します。

// sample.d.ts
declare function sum(a: number, b: number): number;

最後に、型定義ファイルを使用するTypeScriptファイルで参照するようにします。
例えば main.ts というファイルがある場合、次のように記述します。

// main.ts
/// <reference path="sample.d.ts" />

console.log(sum(1, 2)); // Output: 3

これで sum 関数をTypeScriptで型安全に使用できるようになりました！

まとめ

今回はTypeScriptのアンビエント宣言について紹介しました。

アンビエント宣言を使って既存のJavaScriptコードに型定義を追加することができます。
また、型定義ファイル（.d.ts）に型定義をまとめることでモジュール化して、他のプロジェクトで再利用することができます。

ぜひ、実際に手を動かしてTypeScriptの型定義を活用してみてくださいね！🚀