不灭的焱

想了解的是在 TypeScript（以及 JavaScript）中，import { } 里大括号的具体作用，这其实是模块化导入中很核心的一个知识点。

大括号的核心作用

简单来说，import { } 中的大括号用于精准导入模块中的 “具名导出”（Named Exports），和不加大括号的 “默认导出（Default Exports）” 是相对的。

详细解释与示例

1. 先理解两种导出方式

要明白导入时的大括号，首先要知道模块的两种导出方式：

方式 1：具名导出（必须用大括号导入）

当模块里用 export const/function/class 导出时，就是具名导出，导入时必须用大括号包裹对应的名称，且名称要完全一致（除非用 as 重命名）。

// utils.ts（导出模块）
export const PI = 3.14159; // 具名导出常量
export function add(a: number, b: number): number { // 具名导出函数
  return a + b;
}
export interface User { // 具名导出接口（TypeScript 特有）
  name: string;
  age: number;
}

// index.ts（导入模块）
// 用大括号精准导入需要的具名导出项
import { PI, add, User } from './utils';

// 使用导入的内容
console.log(PI); // 输出 3.14159
console.log(add(1, 2)); // 输出 3
const user: User = { name: '张三', age: 20 };

如果想给导入的名称重命名，也可以在大括号里用 as：

import { PI as CirclePI, add as sum } from './utils';
console.log(CirclePI); // 3.14159
console.log(sum(1, 2)); // 3

方式 2：默认导出（不用大括号导入）

当模块里用 export default 导出时，是默认导出，导入时不需要加括号，且可以自定义名称（无需和导出名称一致）。

// calc.ts（导出模块）
export default function multiply(a: number, b: number): number { // 默认导出函数
  return a * b;
}

// index.ts（导入模块）
// 无大括号，名称可以自定义（比如叫 mul 而不是 multiply）
import mul from './calc';
console.log(mul(2, 3)); // 输出 6

2. 混合导入

一个模块可以同时有具名导出和默认导出，此时导入时可以混合使用：

// index.ts
// 先写默认导出的名称，再用大括号写具名导出的项
import add, { PI } from './math';
console.log(add(1, 2), PI); // 输出 3 3.14

3. 导入所有具名导出（* as）

如果想导入一个模块的所有具名导出，可以用 * as 整体接收（无需逐个写大括号）：

总结

1. import { } 中的大括号是用来匹配模块里的具名导出，导入名称必须和导出名称一致（可通过 as 重命名）；
2. 无大括号的 import xxx from 是导入模块的默认导出，名称可自定义；
3. 一个模块可同时有具名导出和默认导出，导入时可混合使用 import 默认名, { 具名1, 具名2 } from。