0Pricing
TypeScript Academy · レッスン

Ambient declarations（.d.ts）とサードパーティの型定義

.d.tsファイルにambient declarationを記述してグローバルやモジュールを表現し、サードパーティの型定義を安全に導入して使います

「Ambient declarations（.d.ts）とサードパーティの型定義」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標: .d.tsファイルのアンビエント宣言で外部のJavaScriptを記述し、型情報のないライブラリにはサードパーティの型定義を使えるようにします。

グローバル宣言

globals.d.tsでは、グローバルを宣言したり、アンビエントインターフェース（例: Window）を拡張したりできます。JSは出力されません。

// file: globals.d.ts
// Declare global variables and interfaces
declare const VERSION: string;
declare interface Window {
  appReady?: boolean;
}

レシーバー付きラムダの基本

  • レシーバーとは、ラムダ内で使用するビルダーのインスタンスです。
  • 呼び出しを簡潔にできます。item("Tea")のように記述し、builder.itemとは記述しません。
  • 名前は短くし、アクションが明確になるようにします。

モジュール宣言

declare moduleは、型情報を提供しないパッケージを記述します。これでimport { coolify }が正しく型チェックされます。

// file: cool-lib.d.ts
// Provide types for an untyped JS module
declare module "cool-lib" {
  export function coolify(s: string): string;
  export const version: string;
}

モジュール拡張

モジュール拡張では、インストール済みの型定義を拡張します。たとえば、既存のインターフェースにカスタムプロパティを追加できます。

// file: react-augment.d.ts
// Extend an existing module (augmentation)
declare module "react" {
  interface HTMLAttributes<T> {
    dataTestId?: string;
  }
}

サードパーティの型定義

ライブラリが型情報を提供していない場合は、DefinitelyTypedの@types/パッケージを優先します。ビルドには.d.tsファイルだけが追加されます。

// install: npm i -D @types/lodash
// usage:
import _ from "lodash";
const r = _.chunk([1,2,3,4], 2);

ヒントと解決方法

ヒント:

  • .d.tsはsrc/の下に置くか、tsconfig.jsonのinclude／typeRoots／typesで読み込ませます。
  • 拡張にはモジュール拡張を使い、node_modulesは編集しないでください。
  • 範囲が広すぎるanyは避け、最小限で正確な形を指定します。

アンビエント宣言の確認

簡単な確認: アンビエント宣言は何に使うものでしょうか?

まとめ

まとめ: グローバルやモジュールには.d.tsファイルを使い、コミュニティの型定義には@typesを優先し、安全な拡張にはモジュール拡張を使います。

振り返り

振り返り：ブロックごとに型付きレシーバーを使用し、スコープの安全性のために@DslMarkerを追加し、扱いやすさを保つために不変モデルを返します。

よくある質問

「Ambient declarations（.d.ts）とサードパーティの型定義」レッスンは無料ですか？

はい。「Ambient declarations（.d.ts）とサードパーティの型定義」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「Ambient declarations（.d.ts）とサードパーティの型定義」で何を学びますか？

.d.tsファイルにambient declarationを記述してグローバルやモジュールを表現し、サードパーティの型定義を安全に導入して使います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「Ambient declarations（.d.ts）とサードパーティの型定義」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ES Modules（namedとdefault）、再エクスポート
  2. Ambient declarations（.d.ts）とサードパーティの型定義
  3. パスマッピングとモジュール解決
← TypeScript Academyに戻る