模块导出

模块导出使用 export 关键字,将模块内部的变量、函数、类、接口等暴露给其他模块使用。TypeScript 支持多种导出方式。

命名导出

命名导出可以导出多个成员。

export const PI = 3.14159

export function add(a: number, b: number): number {
  return a + b
}

export class Calculator {
  multiply(a: number, b: number): number {
    return a * b
  }
}

export interface User {
  id: number
  name: string
}

export type ID = string | number

命名导出可以导出变量、函数、类、接口、类型别名等。

导出列表

可以使用导出列表集中导出。

const PI = 3.14159

function add(a: number, b: number): number {
  return a + b
}

class Calculator {
  multiply(a: number, b: number): number {
    return a * b
  }
}

export { PI, add, Calculator }

导出列表让导出更加清晰。

重命名导出

导出时可以重命名。

function add(a: number, b: number): number {
  return a + b
}

function subtract(a: number, b: number): number {
  return a - b
}

export {
  add as sum,
  subtract as difference
}

导入时使用重命名后的名称。

默认导出

每个模块可以有一个默认导出。

export default class User {
  constructor(public name: string) {}
}

默认导出导入时可以自定义名称。

import User from "./user"

const user = new User("张三")

默认导出通常用于导出模块的主要功能。

默认导出与命名导出

模块可以同时有默认导出和命名导出。

export default class User {
  constructor(public name: string) {}
}

export function validateName(name: string): boolean {
  return name.length > 0
}

export const MAX_NAME_LENGTH = 50

导入时可以分别导入。

import User, { validateName, MAX_NAME_LENGTH } from "./user"

const user = new User("张三")
console.log(validateName(user.name))
console.log(MAX_NAME_LENGTH)

重新导出

可以从其他模块重新导出。

export { add, subtract } from "./math"
export { User } from "./user"
export * from "./utils"

重新导出可以组合多个模块的导出。

导出类型

可以只导出类型。

export type User = {
  id: number
  name: string
}

export interface Product {
  id: number
  name: string
  price: number
}

TypeScript 3.8 引入了 export type 语法,明确表示只导出类型。

export type { User, Product }

导出常量

常量导出常用于配置。

export const API_BASE_URL = "https://api.example.com"
export const MAX_RETRIES = 3
export const TIMEOUT = 5000

导入后可以直接使用常量。

import { API_BASE_URL, MAX_RETRIES, TIMEOUT } from "./config"

console.log(API_BASE_URL)
console.log(MAX_RETRIES)
console.log(TIMEOUT)

实际应用

模块导出在实际开发中常用于组织工具函数。

export function formatDate(date: Date): string {
  return date.toLocaleDateString("zh-CN")
}

export function formatCurrency(amount: number): string {
  return ${amount.toFixed(2)}`
}

export function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timer: ReturnType<typeof setTimeout>
  return (...args: Parameters<T>) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}

工具模块导出多个相关函数,便于复用。

小结

模块导出使用 export 关键字,支持命名导出和默认导出。命名导出可以导出多个成员,默认导出每个模块只能有一个。导出时可以重命名,可以从其他模块重新导出。export type 明确表示只导出类型。合理使用模块导出可以组织代码结构,提高代码的可维护性。