模块导入

模块导入使用 import 关键字,从其他模块导入变量、函数、类、类型等。TypeScript 支持多种导入方式。

命名导入

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

import { PI, add, Calculator } from "./math"

console.log(PI)
console.log(add(1, 2))

const calc = new Calculator()
console.log(calc.multiply(2, 3))

导入的成员名称必须与导出的名称一致。

重命名导入

导入时可以重命名。

import { add as sum, subtract as difference } from "./math"

console.log(sum(1, 2))
console.log(difference(5, 3))

重命名可以避免命名冲突,或使用更合适的名称。

导入全部

可以导入模块的全部导出。

import * as math from "./math"

console.log(math.PI)
console.log(math.add(1, 2))

const calc = new math.Calculator()
console.log(calc.multiply(2, 3))

导入全部时,所有导出都作为模块对象的属性。

默认导入

默认导入用于导入模块的默认导出。

import User from "./user"

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

默认导入可以自定义名称,不需要与导出时的名称一致。

默认导入与命名导入

可以同时导入默认导出和命名导出。

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

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

默认导入在前,命名导入在后。

动态导入

动态导入使用 import() 函数,返回 Promise。

async function loadModule() {
  const math = await import("./math")
  console.log(math.add(1, 2))
}

loadModule()

动态导入可以实现按需加载,减少初始加载时间。

类型导入

可以只导入类型。

import type { User, Product } from "./types"

function processUser(user: User): void {
  console.log(user.name)
}

function processProduct(product: Product): void {
  console.log(product.name)
}

import type 明确表示只导入类型,编译后会被移除。

类型与值同时导入

可以同时导入类型和值。

import { User, validateName, type Product } from "./module"

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

function processProduct(product: Product): void {
  console.log(product.name)
}

type 修饰符可以单独标记类型导入。

侧边导入

有些模块只需要执行,不需要导入任何成员。

import "./polyfills"
import "./styles.css"

侧边导入用于执行模块的副作用,如注册全局变量、加载样式等。

实际应用

模块导入在实际开发中常用于组合多个模块。

import { User, validateUser } from "./user"
import { Product, formatPrice } from "./product"
import { formatDate, debounce } from "./utils"

async function main() {
  const user: User = {
    id: 1,
    name: "张三",
    email: "zhangsan@example.com"
  }

  if (validateUser(user)) {
    console.log(`用户: ${user.name}`)
  }

  const product: Product = {
    id: 1,
    name: "商品",
    price: 99.99
  }

  console.log(`价格: ${formatPrice(product.price)}`)
  console.log(`日期: ${formatDate(new Date())}`)
}

main()

模块导入让代码依赖关系清晰,便于维护。

小结

模块导入使用 import 关键字,支持命名导入、默认导入、导入全部和动态导入。导入时可以重命名,避免命名冲突。import type 明确表示只导入类型。侧边导入用于执行模块的副作用。合理使用模块导入可以组织代码结构,管理代码依赖。