模块导入使用
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 明确表示只导入类型。侧边导入用于执行模块的副作用。合理使用模块导入可以组织代码结构,管理代码依赖。