Web Design Leaves

名前付きエクスポート/インポート

//変数をエクスポート
export const name = "foo";
export const age = 22;

//関数をエクスポート（アロー関数）
export const hello = () => console.log("Hello");

//関数をエクスポート（関数宣言）
export function greeting() {
  console.log(`My name is ${name} and ${age} years old`);
}

export { 変数のカンマ区切りリスト };

//変数を定義
const name = "foo";
const age = 22;

//関数を定義（アロー関数）
const hello = () => console.log("Hello");

//関数を定義（関数宣言）
function greeting() {
  console.log(`My name is ${name} and ${age} years old`);
}

//定義済みの機能を export 文でリストで指定してエクスポート
export { name, age, hello, greeting };

import { 変数のカンマ区切りリスト } from "モジュールのパス";

import { name, age, hello, greeting } from "./module.js";

// インポートしたデータを使用
console.log(name, age); // foo 22
hello(); // Hello
greeting(); // My name is foo and 22 years old

% npx tsc  // コンパイルを実行
% node dist/index.js // node コマンドを実行
foo 22
Hello
My name is foo and 22 years old

export const hello = () => console.log("Hello");  // 関数をエクスポート
console.log("this is module.ts");  // 確認用の出力

import { hello } from "./module.js"; // hello をインポート
hello(); // hello を実行
console.log("this is index.ts");  // 確認用の出力

% npx tsc // コンパイル
% node dist/index.js // 実行
this is module.ts
Hello
this is index.ts

const foo = "Foo";
console.log(foo);

import "./foo.js" // Foo が出力される

const name = "foo";
const age = 22;
// name を fooName という名前でエクスポート
export { name as fooName, age };

import { fooName, age } from "./module.js";
console.log(fooName, age);

import { fooName, age as fooAge } from "./module.js";
// age という名前でエクスポートされた変数を fooAge として使う
console.log(fooName, fooAge);

デフォルトエクスポート

デフォルトエクスポートはモジュールごとに1つしかエクスポートできない特殊なエクスポートで、モジュールがデフォルトの機能を持つことができるように設計されたものです。

以下がデフォルトエクスポートの構文です。式の評価結果をそのモジュールのデフォルト値としてエクスポートします。export default は１つのモジュールに１つしか記述できません。

export default 式;

以下は "foo" という値（"foo" という式の評価値）をデフォルトエクスポートする例です。

// "foo" という値をデフォルトエクスポート
export default "foo";

以下は変数 foo の値をデフォルトエクスポートする例です。

const foo = "foo";
// 変数の値（式の評価結果）をデフォルトエクスポートする
export default foo;

export default 構文ではあらゆる式が許可されます。

export default 1 + 2; // 式の評価結果 3 がデフォルトエクスポートされえる

以下は変数 hello の評価結果（関数）をデフォルトエクスポートする例です。

const hello = () => {
  console.log("Hello!");
}
// 変数 hello の評価結果（関数）をデフォルトエクスポートする
export default hello;

export default 構文に関数やクラスを直接指定すると、式ではなく宣言としてエクスポートされます。

export default function hello() {
  console.log("Hello!");
}

また、関数やクラスの宣言は無名にすることができます（宣言と同時にデフォルトエクスポートする場合、関数やクラスの名前を省略することができます）。

export default function() {
  console.log("Hello!");
}

export default () => {
  console.log("Hello!");
}

変数の場合は、宣言とデフォルトエクスポートを同時に行うことはできません。以下はエラーになります。

export default const foo = "foo";  // エラー（Expression expected）

export default const hello = () => {  // エラー（Expression expected）
  console.log(`Hello, my name is ${name}.`)
}

import 変数名 from "モジュールのパス";

const name = "foo";
// デフォルトエクスポート
export default name;

// デフォルトインポート
import fooName from "./module.js";
console.log(fooName); // foo

const name = "foo";
// デフォルトエクスポート
export { name as default };

// デフォルトインポート
import { default as fooName } from "./module.js";
console.log(fooName); // foo

// 名前付きエクスポート
export const name = "foo";
export const age = 22;

// デフォルトエクスポート
export default function hello() {
  console.log(`Hello, my name is ${name}.`)
}

// デフォルトインポートと名前付きインポートをまとめて記述
import helloFunc, { name, age } from "./module.js";
helloFunc(); // Hello, my name is foo.
console.log( name, age); // foo 22

すべてをインポート

import * as 構文を使って、すべての名前つき及びデフォルトエクスポートをまとめてオブジェクト（名前空間オブジェクト）としてインポートすることができます。以下の構文の「変数名」で指定された変数にオブジェクトが代入されます。

名前空間オブジェクト（Namespace Object）はインポートするモジュールのすべてのエクスポートを格納したオブジェクトになります。

import * as 変数名 from "モジュールのパス";

この方法では、モジュールの全てのエクスポートを名前空間オブジェクトとして取得して、それらをオブジェクトのメンバー（プロパティ）として利用します。

以下のようなモジュール module.ts がある場合、

export const name = "foo";
export const age = 22;
export const hello = () => console.log("Hello");
export function greeting() {
console.log(`My name is ${name} and ${age} years old`);
}
export default { foo: "foo"};  // デフォルトエクスポート

以下のようにモジュール module.ts のすべてのエクスポートをオブジェクト（以下の場合は myModule）として取得して使用できます。

また、default という特別なプロパティ名を使ってデフォルトエクスポートにもアクセスできます。

import * as myModule from "./module.js";

console.log(myModule.name, myModule.age); // foo 22
myModule.hello(); // Hello
myModule.greeting(); // My name is foo and 22 years old

// default というプロパティ名を使ってデフォルトエクスポートにもアクセスできる
console.log(myModule.default);  // {foo: 'foo'}

この方法の場合、オブジェクトのメンバーとして利用できるようにすることで独自の名前空間（Namespace）を持たせる効果があり、変数名の名前の衝突を回避することができます。

再エクスポート

再エクスポートは、別のモジュールからインポートしたものを自分自身からエクスポートし直すことで、複数のモジュールからエクスポートされたものをまとめたモジュールを作る（1つのモジュールに集約する）場合などに使われます。

再エクスポートの構文にはいくつかのパターンがありますが、基本的には export 文のあとに from を続けて、別のモジュール名を指定します。

以下は指定したモジュールからエクスポートされているすべての変数が再エクスポートされます。但し、再エクスポートの場合、デフォルトエクスポートは含まれません。

export * from "モジュールのパス";

以下は指定したモジュールからすべてのエクスポート（デフォルトエクスポートを含む）を変数名に指定したオブジェクトとして再エクスポートします。

export * as 変数名 from "モジュールのパス";

以下は指定したモジュールからエクスポートされている変数名を指定して再エクスポートします。変数名のリストでは as を使って別名で再エクスポートすることができます。

export { 変数名のリスト } from "モジュールのパス";

最初の構文では、デフォルトエクスポートは含まれないので、以下のように明示的に別途デフォルトエクスポートを再エクスポートすることができます。

export * from './module.js'; // すべての名前付きエクスポートを再エクスポート
export { default } from './module.js'; // デフォルトエクスポートを再エクスポート

dynamic import： import()

dynamic import は ES2020 で導入された動的に import を非同期的に実行するための機能です。

import(モジュール名) 

import() は普通の import 宣言と異なり、トップレベルでなくても使用でき、モジュール以外の環境（スクリプト）でもモジュールをインポートすることができます。

import() にモジュールのパスを渡すと、そのモジュールの名前空間オブジェクト（モジュールのすべてのエクスポートを格納したオブジェクト）を結果として持つ Promise を返します。

例えば以下のようなモジュールをインポートする場合、

export const name = "foo";
export const age = 22;
export const hello = () => console.log("Hello");
export function greeting() {
console.log(`My name is ${name} and ${age} years old`);
}
export default { foo: "foo"};  // デフォルトエクスポート

import() は Promise を返すので、Promise の then メソッドを使えば、コールバック関数の引数に名前空間オブジェクトが渡されます。

モジュールのパスは普通の import 宣言同様、カレントディレクトリを表す ./ や１つ上のディレクトリを表す ../ を使って指定し、ファイル名は、コンパイル後の拡張子.jsを指定します。

import() での読み込みは非同期処理として扱われるので、以下を実行すると先に「同期的処理」が出力され、その後「foo 22」などが（非同期的なタイミングで）出力されます。

import('./module.js').then((response) => {
  console.log(response.name, response.age); // foo 22
  console.log(response.default); // {foo: 'foo'}
  response.hello(); // Hello
  response.greeting(); // My name is foo and 22 years old
});

console.log('同期的処理');

import() はトップレベルでなくても使用できるので、条件文のブロックや関数の中で使用することもできます。また、import() に指定するモジュールのパスは変数で指定することもできます。

以下では then メソッドのコールバック関数の引数に渡されるオブジェクトを分割代入を使って選択的に変数に代入しています。

const url = './module.js';
const flag = true;
if (flag) {
  // トップレベルでなくても使用できる
  import(url).then(({ name, age }) => {
    console.log(name, age); // foo 22
  });
}

Type-only imports and exports

Type-only imports and exports は、モジュールから型情報のみをインポート・エクスポートするための機能（構文）です。

多くの場合、この機能を使わなくても、前述の通常の import や export を使って、型や変数をインポート・エクスポートすることができます。但し、TypeScript コンパイラ以外の方法を使って TypeScript を JavaScript にコンパイルする場合にこの機能が必要になる場合があります。

export type { }

export type {}という構文を使うと、エクスポートされたものは型としてのみ使用できます。

以下はこの構文を使って型情報をエクスポートする例です。

この構文では、型とともに通常の変数をエクスポートすることは可能ですが、インポートした側ではその変数を値として使用することはできません（型としてのみ使用可能）。

type Person = {
  name: string;
  age: number;
}

const foo: Person = {
  name: "foo",
  age: 22
}

// 型情報のみをエクスポート（変数も一緒にエクスポートすることは可能）
export type { Person, foo };

インポートする側では、export type {}でエクスポートされた型を変数と一緒に import でインポートすることができます。

但し、以下のようにインポートした型情報は型として使用することはできますが、インポートした変数は値として使用するとコンパイルエラー及び実行時エラーになります。

import { Person, foo } from "./module.js";

const person1: Person = {
  name: "bar",
  age: 18
}

const person2 = foo;  // エラー
//'foo' cannot be used as a value because it was exported using 'export type'.
// Uncaught ReferenceError: foo is not defined（実行時エラー）

この構文を使った場合、コンパイル後の JavaScript ではエクスポートは export {} となり、何もエクスポートされなくなります。そのため、インポート側で変数にアクセスするとコンパイルエラーと共に実行時エラー（Uncaught ReferenceError）になります。

const foo = {
  name: "foo",
  age: 22
};
export {};  // 変数 foo もエクスポートされない

このようにexport type {}構文で変数をエクスポートした場合、インポート側で値として使用することはできませんが、型のコンテキストで使用することはできます。

例えば、以下のようにインポートした変数 foo を型のコンテキストで typeof と使用することはできます。

import { Person, foo } from "./module.js";

const person1: Person = {
  name: "bar",
  age: 18
}

// 型のコンテキストで typeof と使用
type Foo = typeof foo; // OK

import type

import typeは型情報だけをインポートする構文です。

type Person = {
  name: string;
  age: number;
}

const foo: Person = {
  name: "foo",
  age: 22
}

//通常のエクスポート
export { Person, foo };

import typeでインポートしたものは、型としてのみ使用できます。

// 型情報だけをインポート
import type { Person, foo } from "./module.js";

const person1: Person = {
  name: "bar",
  age: 18
}

// 型のコンテキストで typeof と使用
type Foo = typeof foo; // OK

// 値として使用するとエラーになります
const person2 = foo; // エラー
// 'foo' cannot be used as a value because it was imported using 'import type'.
// Uncaught ReferenceError: foo is not defined（実行時エラー）

type を接頭辞として付けられたインポートとエクスポート

import type 構文を使う場合、モジュールから通常のインポートと型情報のみのインポートをするには、import宣言を別々に記述する必要があります。

例えば、前述の例の場合、以下のように記述すれば、変数 foo を値として使用することができます。

// 型情報のみのインポート
import type { Person } from "./module.js";
// 通常のインポート
import { foo } from "./module.js";

const person1: Person = {
  name: "bar",
  age: 18
}

type Foo = typeof foo; // OK
const person2 = foo; // OK（値として使用）

上記は以下のように型情報のみをインポートする変数名の前に type を接頭辞を付けることで、１つのimport宣言にまとめることができます。

// 型情報のみをインポートする変数名の前に type を付ける
import  { type Person, foo } from "./module.js";

const person1: Person = {
  name: "bar",
  age: 18
}

type Foo = typeof foo; // OK
const person2 = foo; // OK

• Type-only imports and exports（TypeScript handbook）

モジュールのスコープ

ファイルがモジュールとして扱われる場合、以下のような特徴があります。

• 各モジュールには独自のトップレベルのスコープがあります
• トップレベルでの変数はグローバルではなくモジュール内のローカル変数として定義されます
• トップレベルの this は window ではなく undefined になります
• モジュール内で定義された変数を変更できるのはその変数を宣言したモジュール内のみになります

モジュール内で定義された変数はそのモジュール内をスコープとして持ち、エクスポートされない限り、モジュール内のローカル変数となり、他のモジュールから参照することはできません。

明示的に export をつけた値（エクスポートした値）だけが公開され、他のモジュールから参照できます。

例えば、以下のモジュール counter.ts は関数 countUp のみをエクスポートしています。

let count = 0;
// 以下の関数をエクスポート
export const countUp = () => {
  return  ++ count;
}

上記のモジュール counter.ts を使う側ではエクスポートされている countUp のみをインポートすることができます。変数 count をインポートしようとするとコンパイルエラーになります。

import { countUp } from "./counter.js";

console.log(`count is ${countUp()}`);  // count is 0
console.log(`count is ${countUp()}`);  // count is 1
console.log(`count is ${countUp()}`);  // count is 2

モジュール counter.ts を以下のように書き換えて変数 count もエクスポートするようにすれば、

// count もエクスポート
export let count = 0;

export const countUp = () => {
  return  ++ count;
}

使う側でも変数 count の値を参照することができます。

但し、インポートした変数を変更しようとすると、コンパイルエラーになり、変更することはできません。

import { countUp, count } from "./counter.js";

countUp();
console.log(`count is ${count}`);  // count is 1

// 外部からモジュールの変数を変更できないので以下はエラーになる
count = 10;
// Cannot assign to 'count' because it is an import.

スクリプトのスコープ

TypeScript においてファイルがスクリプトとして扱われる場合、トップレベルに定義した変数や型のスコープはファイル内だけではなくプロジェクト全体になります。

そのため、ファイルがスクリプトとして扱われる場合、プロジェクト内で別ファイルなのに同じ名前の変数を定義すると「同じ名前の変数を再宣言することはできない」というコンパイルエラーが発生します。

例えば、以下のような同じプロジェクト内にモジュールでない２つのファイルがある場合、同じ名前の変数があるとコンパイルエラーになります。

const myName = "foo";  // コンパイルエラー
// Cannot redeclare block-scoped variable 'myName'. 

const myName = "bar";  // コンパイルエラー
// Cannot redeclare block-scoped variable 'myName'.

コンパイルエラーにならないようにするには以下のような方法があります。

1. 変数名を異なる名前に変更する
2. export {}; を追加して、ファイルをモジュールとして扱う
3. ブロック内に記述する
4. tsconfig.json の設定を変更する

簡単なのは 2. のexport {}; を追加して、ファイルをモジュールとして扱うようにする方法です。

例えば、上記の例の場合、foo.ts または bar.ts のいずれか（または両方）にexport {};を追加すればエラーは消えます。export {};は空の変数（0個の変数）をエクスポートするという意味で、何もエクスポートしませんが、export を使っているのでファイルはモジュールとして扱われます。

const myName = "foo";
export {}; // 空の変数をエクスポートしてこのファイルをモジュールにする

また、name などの特定の識別子を使って変数を定義すると、同様のエラーが発生します。

これは TypeScript をインストールする際に同梱される DOM API の型定義ファイル（lib.dom.d.ts）に name などの変数がすでに定義されているために発生します。

このような場合も上記のいずれかの方法でエラーを回避することができます。

関連ページ：TypeScript の変数定義時のコンパイルエラー

今まで使えていた型がコンパイルエラーになる

例えば、以下のようなスクリプトとして扱われる２つの TypeScript のファイルがある場合、

type Person = {
  name: string;
  age: number;
}

const foo: Person = {
  name: "foo",
  age: 22
}

上記の index.ts では foo の型注釈に person.ts で定義されている Person 型を使用していますが、問題なくコンパイルできてしまいます。

これも、スクリプトとして扱われる person.ts の中で定義されている Person 型のスコープがプロジェクト全体になっているためです。

もし、person.ts を以下のように Person をエクスポートするように書き換えてコンパイルすると、

// Person をエクスポート（ファイルはモジュールになる）
export type Person = {
  name: string;
  age: number;
}

index.ts では Cannot find name 'Person' というコンパイルエラーになります。

これは person.ts がモジュールになったため、Person のスコープが person.ts の中だけになり、index.ts から Person を参照できなくなってしまったためです。

index.ts でのエラーを解消するには、明示的に Person 型をインポートします。この場合、型情報のみをインポートするので、Type-only を使って import type { Person } from "./person.js"; や import { type Person } from "./person.js"; でも同じです。

// Person 型をインポート
import { Person } from "./person.js";

const foo: Person = {
  name: "foo",
  age: 22
}

このように、今まで使えていた型が急にコンパイルエラーで使えなくなった場合、元の型がスクリプトからモジュールに変わった可能性があります。

TypeScript でのスコープ

この項の最初に記載したように、ファイルがスクリプトとして扱われる場合にトップレベルに定義した変数や型のスコープがプロジェクト全体になるのは、TypeScript においての場合です。

例えば、以下の２つのファイルをコンパイルしてもコンパイルエラーが発生しません。

但し、コンパイル後の index.js では実行時エラー（Uncaught ReferenceError）が発生します。

const foo = "Foo";

console.log(foo);  //コンパイルエラーは発生しないが、実行時エラーになる
// Uncaught ReferenceError: foo is not defined

この場合、foo.ts での foo の定義では const 宣言されているので、foo の型は文字列リテラル型 "Foo" になるので、以下のように使うことはできます。

const bar: typeof foo = "Foo";

但し、何らかの理由で後から foo.ts をモジュールに変更すると、index.ts では Cannot find name 'foo' というコンパイルエラーになるので、このような使い方はしないほうが良いかと思います。