TypeScript 中的匯出語句

Shuvayan Ghosh Dastidar 2023年1月30日 2022年7月12日
  1. 在 TypeScript 中使用 export 語句
  2. TypeScript 中的匯出型別
  3. 在 TypeScript 中匯出所有內容
TypeScript 中的匯出語句

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 語句,一個是命名匯出,另一個是預設匯出。default 匯出僅限於每個檔案一個預設匯出,而可以有多個命名匯出或正常匯出語句。

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 函式後新增了兩個數字。現在,即使使用不同的名稱也可以使用該功能。

例如:

File2.ts

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

因此,任何名稱都可以在預設匯出條件中使用。但是,預設匯出僅限於每個檔案一個。

我們必須使用非預設或命名匯出來匯出更多元素。匯出的模組以相同的名稱匯入。

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