0Pricing
TypeScript Academy · レッスン

NamespaceとModule:現代的な使い方

NamespaceよりModuleが推奨される理由を理解します。

「NamespaceとModule:現代的な使い方」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

TypeScriptにはもともと、コードを整理するための名前付きスコープとして、名前空間(以前は「内部モジュール」と呼ばれていました)がありました。現在のTypeScriptでは、代わりにES modulesを使用します。このレッスンでは、それぞれをいつ使うべきかを説明します。

名前空間とは

名前空間は、`namespace`キーワードを使用して、関連するコードを名前付きスコープの下にまとめるTypeScript固有の方法です。
namespace Geometry {
  export interface Point { x: number; y: number; }
  export function distance(a: Point, b: Point): number {
    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
  }
}

名前空間メンバーへのアクセス

ドット記法で名前空間名を指定して、名前空間のメンバーにアクセスします。
const p1: Geometry.Point = { x: 0, y: 0 };
const p2: Geometry.Point = { x: 3, y: 4 };
const d = Geometry.distance(p1, p2); // 5

入れ子になった名前空間

名前空間は入れ子にできます。
namespace App {
  export namespace Models {
    export interface User { name: string; }
  }
}
const u: App.Models.User = { name: 'Alice' };

名前空間のマージ

名前空間は宣言マージをサポートしています。同じ名前を持つ2つの名前空間宣言はマージされます。
namespace Validation {
  export function validate(s: string): boolean { return s.length > 0; }
}
namespace Validation {
  export function sanitize(s: string): string { return s.trim(); }
}

モジュールが推奨される理由

ES modulesはJavaScriptの標準です。すべてのバンドラーでサポートされ、効率的にtree shakingされ、最新のブラウザーやNode.jsでネイティブに動作します。

名前空間に相当するモジュール

最新のTypeScriptでは、名前空間は単純に1つのファイルになります。外部に公開するものだけをexportし、それ以外は非公開にします。
// geometry.ts
export interface Point { x: number; y: number; }
export function distance(a: Point, b: Point): number {
  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
}

宣言ファイルでは今も使われる名前空間

名前空間は、グローバルライブラリ(DOMの型やNode.jsの型など)の`.d.ts`宣言ファイルで現在も広く使われています。これは、グローバルスコープを拡張するためです。
// node.d.ts
declare namespace NodeJS {
  interface ProcessEnv { NODE_ENV?: 'development' | 'production'; }
}

トリプルスラッシュ参照(レガシー)

ES modulesが登場する前は、トリプルスラッシュディレクティブを使って他のファイルを参照していました。現在は、tsconfigのincludesとモジュールのimportsがその役割を置き換えています。
/// <reference types="node" />
/// <reference path="./other.d.ts" />

名前空間を今も使う場合

名前空間は、(1) グローバルなアンビエント型の宣言ファイル内、(2) ライブラリにある既存のグローバル名前空間を拡張する場合に使用します。

名前空間からモジュールへの移行

`namespace Foo {}`をモジュールファイルに置き換えます。`/// `をimportsに置き換えます。TypeScriptチームは、この移行方法を文書化しています。

確認問題

最新のTypeScriptでは、名前空間の代わりに何を使うことが推奨されていますか?

まとめ

名前空間はコードを名前付きスコープの下に整理しますが、最新のTypeScriptではレガシーな機能です。アプリケーションコードではES modules(import/export)を使用します。名前空間は、グローバル型の拡張を行う宣言ファイルでは引き続き役立ちます。

よくある質問

「NamespaceとModule:現代的な使い方」レッスンは無料ですか?

はい。「NamespaceとModule:現代的な使い方」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「NamespaceとModule:現代的な使い方」で何を学びますか?

NamespaceよりModuleが推奨される理由を理解します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「NamespaceとModule:現代的な使い方」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. ES Module構文:importとexport
  2. 再エクスポートとBarrelファイル
  3. 型専用のImportとExport
  4. NamespaceとModule:現代的な使い方
← TypeScript Academyに戻る