在 TypeScript 中,export
用于將模塊中的變量、函數、類、類型等暴露給外部使用。export
語法允許將模塊化的代碼分割并在其他文件中導入。
1. 命名導出(Named Export)
命名導出是 TypeScript 中最常見的一種導出方式,它允許你導出多個實體,導入時需要使用相同的名字。
語法
export { <entity1>, <entity2>, ... };
或者直接在聲明時進行導出:
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;}
}
然后在其他文件中導入:
// 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
部分導入
你也可以選擇只導入你需要的部分:
// app.ts
import { add } from './math';console.log(add(5, 3)); // 8
別名導入
你可以為導入的命名實體指定別名:
// 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. 默認導出(Default Export)
默認導出用于導出模塊中的單個實體,每個模塊只能有一個默認導出。在導入時不需要使用花括號,可以自定義導入名稱。
語法
export default <entity>;
示例
// greet.ts
export default function greet(name: string): string {return `Hello, ${name}!`;
}
然后在其他文件中導入并使用:
// app.ts
import greet from './greet';console.log(greet("Alice")); // Hello, Alice!
3. 混合使用命名導出與默認導出
你可以在一個模塊中同時使用命名導出和默認導出:
// 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;
}
然后可以這樣導入:
// 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. 重命名導出(Export Aliases)
你可以在導入時或導出時使用別名。
導出時重命名
// math.ts
const PI = 3.14159;function add(x: number, y: number): number {return x + y;
}// 使用 `as` 來重命名導出的符號
export { PI as PiValue, add as addNumbers };
導入時重命名
// app.ts
import { PiValue, addNumbers } from './math';console.log(PiValue); // 3.14159
console.log(addNumbers(5, 3)); // 8
5. 導出整個模塊(Re-export)
你可以將另一個模塊的所有內容導出到當前模塊中。這對于模塊的組合和封裝非常有用。
示例
// math.ts
export const PI = 3.14159;export function add(x: number, y: number): number {return x + y;
}// geometry.ts
export * from './math'; // 將math模塊的所有導出都重新導出// app.ts
import { PI, add } from './geometry';console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
6. 導出類型(Type Export)
除了導出變量、函數和類,TypeScript 還允許導出類型別名、接口等類型定義。
示例
// 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)兼容。當你希望以 CommonJS 風格導出模塊時,可以使用 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!');
這種用法較少見,因為大多數 TypeScript 代碼會使用 export
和 import
語法。
總結
export
用于將模塊中的代碼暴露出去,可以導出函數、類、常量、類型等。export default
用于導出模塊中的單個實體,導入時不需要花括號,并且可以自定義導入名稱。- 命名導出與默認導出 可以結合使用,一個模塊可以有多個命名導出和一個默認導出。
export =
用于與 CommonJS 等舊版模塊系統兼容。
export
和 import
使得 TypeScript 支持模塊化,幫助你組織和分離代碼,提高代碼的可維護性和復用性。