TypeScript 的模块系统基于 ECMAScript 2015(ES6)模块规范,并在其基础上进行了扩展。
模块系统
TypeScript 的模块系统允许你将代码分割成独立的文件,并通过导入和导出机制在文件之间共享代码。这种模块化的方式有助于提高代码的可维护性和可重用性。
导出(Export)
在 TypeScript 中,export interface
和 export type
是用于定义和导出类型的两种主要方式。除此之外,TypeScript 还提供了其他一些关键字和语法来定义和导出类型、变量、函数和类。以下是详细的解释和示例:
export interface
interface
用于定义对象的结构。它可以描述对象的属性和方法,并且可以被类实现(implements
)。
// types.ts
export interface User {id: number;name: string;email: string;
}// 使用
import { User } from './types';const user: User = {id: 1,name: 'John Doe',email: 'john.doe@example.com'
};
export type
type
用于定义类型别名。它可以用于定义基本类型、联合类型、交叉类型、元组等。
// types.ts
export type ID = number | string;export type User = {id: ID;name: string;email: string;
};// 使用
import { ID, User } from './types';const userId: ID = 1;const user: User = {id: userId,name: 'John Doe',email: 'john.doe@example.com'
};
export const
const
用于定义常量。常量的值在初始化后不能被修改。
// constants.ts
export const API_URL = 'https://api.example.com';// 使用
import { API_URL } from './constants';console.log(API_URL); // 输出: https://api.example.com
export function
function
用于定义函数。函数可以被导出并在其他模块中使用。
// utils.ts
export function add(a: number, b: number): number {return a + b;
}// 使用
import { add } from './utils';console.log(add(2, 3)); // 输出: 5
export class
class
用于定义类。类可以包含属性和方法,并且可以被实例化。
// models.ts
export class User {constructor(public id: number, public name: string, public email: string) {}displayInfo(): string {return `${this.name} (${this.email})`;}
}// 使用
import { User } from './models';const user = new User(1, 'John Doe', 'john.doe@example.com');
console.log(user.displayInfo()); // 输出: John Doe (john.doe@example.com)
export enum
enum
用于定义枚举类型。枚举类型是一组命名常量的集合。
// enums.ts
export enum Status {Active,Inactive,Pending
}// 使用
import { Status } from './enums';const currentStatus: Status = Status.Active;
console.log(currentStatus); // 输出: 0
export default
export default
用于导出默认值。一个模块只能有一个默认导出。
// utils.ts
export default function subtract(a: number, b: number): number {return a - b;
}或者export default function(a: number, b: number): number {return a - b;
}// 使用
import subtract from './utils';console.log(subtract(5, 3)); // 输出: 2或者// 导入默认导出,可以使用任何名称
import multiplyFunction from './mathUtils';// 使用导入的默认导出函数
const product = multiplyFunction(4, 5);
console.log(`Product: ${product}`); // 输出: Product: 20
导入(Import)
导入语法用于从其他模块中引入变量、函数、类、类型等。
导入命名导出
你可以从一个模块中导入多个命名导出。
import { User, add, API_URL } from './utils';
导入默认导出
你可以从一个模块中导入默认导出。
import subtract from './utils';
导入所有导出
你可以使用 * as
语法导入一个模块的所有导出。
import * as Utils from './utils';const result = Utils.add(2, 3);
重新导出(Re-export)
你可以从另一个模块重新导出变量、函数、类等。
export { User, add, API_URL } from './utils';
总结
- 模块系统:TypeScript 的模块系统基于 ES6 模块规范,允许你将代码分割成独立的文件,并通过导入和导出机制在文件之间共享代码。
- 导出(Export):用于将模块中的变量、函数、类、类型等暴露给其他模块使用。
export interface
:导出接口。export type
:导出类型别名。export const
:导出常量。export function
:导出函数。export class
:导出类。export enum
:导出枚举类型。export default
:导出默认值。
- 导入(Import):用于从其他模块中引入变量、函数、类、类型等。
- 导入命名导出。
- 导入默认导出。
- 导入所有导出。
- 重新导出(Re-export):用于从另一个模块重新导出变量、函数、类等。