快捷導(dǎo)航

TypeScript的export用法示例詳解

更新時(shí)間：2025年07月21日 09:21:18 作者：無風(fēng)聽海

TypeScript中export用于模塊化代碼,可導(dǎo)出變量、函數(shù)、類、類型等,支持命名導(dǎo)出、默認(rèn)導(dǎo)出（單個(gè)實(shí)體,可自定義名稱）、重命名導(dǎo)出及導(dǎo)出整個(gè)模塊,export=用于兼容CommonJS,提升代碼復(fù)用性和可維護(hù)性,本文給大家介紹TypeScript的export用法,感興趣的朋友一起看看吧

1. 命名導(dǎo)出（Named Export）

命名導(dǎo)出是 TypeScript 中最常見的一種導(dǎo)出方式，它允許你導(dǎo)出多個(gè)實(shí)體，導(dǎo)入時(shí)需要使用相同的名字。

語法

export { <entity1>, <entity2>, ... };

或者直接在聲明時(shí)進(jìn)行導(dǎo)出：

export <entity>;

示例

// math.ts
export const PI = 3.14159;
export function add(x: number, y: number): number {
    return x + y;
}
export class Calculator {
    static multiply(x: number, y: number): number {
        return x * y;
    }
}

然后在其他文件中導(dǎo)入：

// app.ts
import { PI, add, Calculator } from './math';
console.log(PI);  // 3.14159
console.log(add(2, 3));  // 5
console.log(Calculator.multiply(2, 3));  // 6

部分導(dǎo)入

你也可以選擇只導(dǎo)入你需要的部分：

// app.ts
import { add } from './math';
console.log(add(5, 3));  // 8

別名導(dǎo)入

你可以為導(dǎo)入的命名實(shí)體指定別名：

// app.ts
import { add as sum, Calculator as Calc } from './math';
console.log(sum(2, 3));  // 5
console.log(Calc.multiply(2, 3));  // 6

2. 默認(rèn)導(dǎo)出（Default Export）

默認(rèn)導(dǎo)出用于導(dǎo)出模塊中的單個(gè)實(shí)體，每個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出。在導(dǎo)入時(shí)不需要使用花括號(hào)，可以自定義導(dǎo)入名稱。

語法

export default <entity>;

示例

// greet.ts
export default function greet(name: string): string {
    return `Hello, ${name}!`;
}

然后在其他文件中導(dǎo)入并使用：

// app.ts
import greet from './greet';
console.log(greet("Alice"));  // Hello, Alice!

3. 混合使用命名導(dǎo)出與默認(rèn)導(dǎo)出

你可以在一個(gè)模塊中同時(shí)使用命名導(dǎo)出和默認(rèn)導(dǎo)出：

// utils.ts
export function add(x: number, y: number): number {
    return x + y;
}
export function subtract(x: number, y: number): number {
    return x - y;
}
export default function multiply(x: number, y: number): number {
    return x * y;
}

然后可以這樣導(dǎo)入：

// app.ts
import multiply, { add, subtract } from './utils';
console.log(multiply(2, 3));  // 6
console.log(add(2, 3));       // 5
console.log(subtract(5, 3));  // 2

4. 重命名導(dǎo)出（Export Aliases）

你可以在導(dǎo)入時(shí)或?qū)С鰰r(shí)使用別名。

導(dǎo)出時(shí)重命名

// math.ts
const PI = 3.14159;
function add(x: number, y: number): number {
    return x + y;
}
// 使用 `as` 來重命名導(dǎo)出的符號(hào)
export { PI as PiValue, add as addNumbers };

導(dǎo)入時(shí)重命名

// app.ts
import { PiValue, addNumbers } from './math';
console.log(PiValue);       // 3.14159
console.log(addNumbers(5, 3));  // 8

5. 導(dǎo)出整個(gè)模塊（Re-export）

你可以將另一個(gè)模塊的所有內(nèi)容導(dǎo)出到當(dāng)前模塊中。這對(duì)于模塊的組合和封裝非常有用。

示例

// math.ts
export const PI = 3.14159;
export function add(x: number, y: number): number {
    return x + y;
}
// geometry.ts
export * from './math';  // 將math模塊的所有導(dǎo)出都重新導(dǎo)出
// app.ts
import { PI, add } from './geometry';
console.log(PI);  // 3.14159
console.log(add(2, 3));  // 5

6. 導(dǎo)出類型（Type Export）

除了導(dǎo)出變量、函數(shù)和類，TypeScript 還允許導(dǎo)出類型別名、接口等類型定義。

示例

// types.ts
export interface Person {
    name: string;
    age: number;
}
export type Point = { x: number; y: number };
// app.ts
import { Person, Point } from './types';
const john: Person = { name: "John", age: 30 };
const point: Point = { x: 10, y: 20 };

7. export = 和 import = require() 的用法

export = 和 import = require() 語法主要用于與舊版 JavaScript 模塊（如 CommonJS）兼容。當(dāng)你希望以 CommonJS 風(fēng)格導(dǎo)出模塊時(shí)，可以使用 export =。

示例

// logger.ts
class Logger {
    log(message: string) {
        console.log(message);
    }
}
export = Logger;

// app.ts
import Logger = require('./logger');
const logger = new Logger();
logger.log('Hello, World!');

這種用法較少見，因?yàn)榇蠖鄶?shù) TypeScript 代碼會(huì)使用 export 和 import 語法。

總結(jié)

export 用于將模塊中的代碼暴露出去，可以導(dǎo)出函數(shù)、類、常量、類型等。
export default 用于導(dǎo)出模塊中的單個(gè)實(shí)體，導(dǎo)入時(shí)不需要花括號(hào)，并且可以自定義導(dǎo)入名稱。
命名導(dǎo)出與默認(rèn)導(dǎo)出可以結(jié)合使用，一個(gè)模塊可以有多個(gè)命名導(dǎo)出和一個(gè)默認(rèn)導(dǎo)出。
export = 用于與 CommonJS 等舊版模塊系統(tǒng)兼容。

export 和 import 使得 TypeScript 支持模塊化，幫助你組織和分離代碼，提高代碼的可維護(hù)性和復(fù)用性。

到此這篇關(guān)于TypeScript的export用法的文章就介紹到這了,更多相關(guān)TypeScript export用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: