在 TypeScript 的开发中，我们经常使用 import 关键字导入其他模块或库中的代码。然而，有时候 import 命令后面会跟着一对花括号 {}，而有时候则没有。这两种形式之间到底有什么区别呢？本文将详细介绍这个问题。
import ...
import 命令后面如果跟着一个模块名，就表示加载该模块的默认输出，即默认情况下 export default 所指向的对象或值。例如：
import React from 'react';
这里的 React 表示加载了 react 模块的默认输出。我们可以直接使用 React 来访问该模块提供的功能。
如果要加载一个自定义的模块，需要确保该模块在其导出语句中使用了 export default 语法，如下所示：
// utils.js
export default function sum(a, b) {
return a + b;
}
// index.ts
import sum from './utils';
console.log(sum(1, 2)); // 输出 3此时我们直接使用 import 加载模块即可，无需加花括号。
import { ... }
当我们需要加载一个模块中的具体导出内容时，就需要使用 import { ... } 语法。例如：
import { useState, useEffect } from 'react';这里的 useState 和 useEffect 分别表示加载了 react 模块中导出的 useState 和 useEffect 两个函数。我们可以通过花括号来指定需要导入哪些内容。
需要注意的是，使用 import { ... } 时，要求导入的变量名必须与该模块中对应导出语句中的变量名完全一致。否则将会抛出错误。
-- -------------------- ---- ------- -- -------- ------ ----- --- - --- ------- -- ------- -- - - -- ------ ----- -------- - --- ------- -- ------- -- - - -- -- -------- ------ - ---- ------ - ---- ---------- -- --------- ------ --- ------ - --- -- ---- -------- - ---- ---------- ------------------ ---- -- -- - ----------------------- ---- -- -- -
在上面的示例代码中，index.ts 中的第二行将会导致一个编译时错误，因为 utils.ts 文件中没有导出名为 divide 的变量。而第四和第五行则指定了需要导入的变量，并且给其中一个变量起了个别名 add。
总结
简单来说，import ... 是用来加载模块的默认输出，而 import { ... } 则是用来加载模块中具体的导出内容。在使用过程中需要注意导出的变量名与导入时指定的变量名要完全一致。
希望本文对你理解 TypeScript 中 import 的使用方式有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/605430098d846479e750ac49