TypeScript の export ステートメント

Shuvayan Ghosh Dastidar 2023年1月30日
  1. TypeScript で export ステートメントを使用する
  2. TypeScript でのエクスポートの種類
  3. TypeScript ですべてをエクスポート
TypeScript の export ステートメント

TypeScript の export キーワードは、変数、定数、クラス、関数、インターフェイス、またはタイプエイリアスをさまざまなファイルにエクスポートするために使用されます。TypeScript の大規模なプロジェクト全体で効率的なファイル管理を行うのに非常に役立ちます。

この記事では、TypeScript で export ステートメントを使用する方法を説明します。

TypeScript で export ステートメントを使用する

export ステートメントの構文は、export キーワードで始まり、その後にエクスポートする要素が続きます。これは、import キーワードを使用して別のファイルにインポートできます。

File1.ts

export SomeFunction() {
    // body of the function
}

File2.ts

import { SomeFunction } from "./File1";

SomeFunction();

上記は、構文と、TypeScript で export キーワードを使用してモジュールをインポートおよびエクスポートする方法の基本的な例を示しています。

TypeScript でのエクスポートの種類

TypeScript にはさまざまな export ステートメントがあり、1つは名前付きエクスポートで、もう 1つはデフォルトのエクスポートです。default エクスポートは、ファイルごとに 1つのデフォルトエクスポートに制限されていますが、複数の名前付きエクスポートまたは通常のエクスポートステートメントが存在する可能性があります。

File1.ts

const AddTwoNumbers = (a : number, b : number) : number  => {
    return a + b;
}

export default AddTwoNumbers;

File2.ts

import AddTwoNumbers from "./File1"
const result = AddTwoNumbers(4,5);

したがって、上記の例では、File1.ts で定義された default export 関数を使用した後に 2つの数値が追加されます。これで、この関数は別の名前でも使用できます。

例えば:

File2.ts

import AddNumbers from "./File1"
const result = AddNumbers(4,5);

したがって、default export の条件では任意の名前を使用できます。ただし、デフォルトのエクスポートはファイルごとに 1つだけに制限されています。

より多くの要素をエクスポートするには、デフォルト以外または名前付きのエクスポートを使用する必要があります。エクスポートされたモジュールは同じ名前でインポートされます。

File1.ts

const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}

export { AddNumbers, SubtractTwoNumbers };

File2.ts

import { AddNumbers, SubtractTwoNumbers } from "./File1"
const resultAdd = AddNumbers(4,5);
const resultSub = SubtractTwoNumbers(4,5);

上記は、それぞれのファイルでの名前付きエクスポートとインポートの例を示しています。それらは中括弧で囲む必要があり、デフォルトのエクスポートとは異なり、名前付きエクスポートはいくつでも存在できます。

TypeScript でデフォルトのエクスポートを使用する別の方法は、export = 構文を使用することです。

File1.ts

class LengthValidator {
    check(s : string) {
        return s.length > 0;
    }
}

export = LengthValidator;

File2.ts

import lengthChecker = require("./File1");
let validator = lengthChecker();
var testString : string = "test"
if ( validator.check(testString)) {
    console.log("Okay");
} else {
    console.log("Not working");
}

TypeScript ですべてをエクスポート

特定のファイルで定義されているすべての要素をエクスポートすることが重要になる場合があります。これは、export および*演算子を介して実行できます。

File1.ts

export const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

export const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}
export * as utils from "./File1"

File2.ts

import {utils} from "./File1"
const resultAdd = utils.AddNumbers(4,5);
const resultSub = utils.SubtractTwoNumbers(4,5);

したがって、File1.ts 内のすべてが utils としてエクスポートされ、別のファイルにインポートでき、上記の例に示すように関数を参照できます。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website