アンビエント宣言(declare)について理解する

Last updated at 2024-04-07Posted at 2023-09-18

1.背景

Branded Type について理解する
この記事の中でdeclareキーワードが出てきた為です。

2. アンビエント宣言(declare)とは

declare var foo: any;
foo = 123; // allowed

実装を定義しない宣言です。
他の場所に存在するコードを記述しようとしていることをTypeScriptに伝えることができます。
宣言された項目が実行時に存在しなければエラーになります。
サンプルコードは実行時に
```
foo = 123
```
しかない為、エラーになります。

サンプルコード

3. 型定義ファイルとは

他のファイルで利用したい型(type/interface)を記述するファイルです。
この型宣言ファイルの定義に基づき、コンパイル時に型推論や型チェックが行われるようになります

例）JavaScriptで記述されたライブラリcalc.jsがあるとします。

calc.js

exports.sub = function(a, b) {
    return a - b;
}

型定義ファイルを以下のように宣言します。

calc.d.ts

export function sub(a: number, b: number): number;

これにより、exec.tsはcalc.d.tsを通してsub関数を認識することができ、コンパイルが通るようになります。

index.ts

import { sub } from "./calc";
console.log(sub(100, 1));

動作確認用リポジトリ
型チェックもされています。

DefinitelyTyped

DefinitelyTypedというコミュニティプロジェクトが存在しており、ここにはJavaScriptで記述されたライブラリの型宣言ファイルが集まっています。

DefinitelyTypedに登録されている型宣言ファイルは、npmコマンドでプロジェクトに取り込むことができます。

npm install --save @types/jquery

トリプルスラッシュディレクティブ

viteのvite/clientで以下のような型定義ファイルを見つけました。

vite-env.d.ts

/// <reference types="vite/client" />

///をトリプルスラッシュディレクティブと言います。

1つのXMLタグを含む1行コメントです。

それが含まれる各ファイルの先頭でのみ有効です。

別のトリプルスラッシュ・ディレクティブを含めて、単一行または複数行のコメントの前にのみ置くことができます。それらがステートメントまたは宣言の後にある場合は、通常のコメントとして扱われて特別な意味を持たなくなります。

型ディレクティブ

/// <reference types="..." />

型ディレクティブは型のimportのようなものです。
型定義ファイルに依存していることを示しています。