在 JavaScript 和 TypeScript 中,import
语句用于导入模块中的导出内容。是否需要使用花括号取决于导入的内容是默认导出还是命名导出。
默认导出 (Default Export)
如果你导入的是模块的默认导出内容,则不需要使用花括号。每个模块只能有一个默认导出。
示例
// 导出
export default function myDefaultFunction() {
console.log("This is a default function");
}
// 导入
import myFunction from "./myModule";
myFunction(); // 调用默认导出的函数
命名导出 (Named Export)
如果你导入的是模块的命名导出内容,则需要使用花括号来指定要导入的命名导出项。模块可以有多个命名导出。
示例
// 导出
export function namedFunction1() {
console.log("This is named function 1");
}
export function namedFunction2() {
console.log("This is named function 2");
}
// 导入
import { namedFunction1, namedFunction2 } from "./myModule";
namedFunction1(); // 调用命名导出的函数 1
namedFunction2(); // 调用命名导出的函数 2
重命名导入内容
你可以在导入时使用 as
关键字对导入的内容进行重命名。
示例
import { namedFunction1 as func1, namedFunction2 as func2 } from "./myModule";
func1();
func2();
导入所有导出内容
你可以使用通配符 *
导入模块中的所有导出内容,并将其作为对象处理。这种方式导入的是一个模块对象,所有命名导出的内容都作为该对象的属性。
示例
import * as myModule from "./myModule";
myModule.namedFunction1();
myModule.namedFunction2();
导入模块对象
如果你想要导入整个模块作为一个对象,可以使用 import
关键字后跟模块名。这种方式不常用,但有时会用于特定场景(如动态导入)。
示例
import myModule from "./myModule";
// 注意:这种方式导入的是模块的默认导出内容
// 如果没有默认导出,可能会得到一个包含命名导出的对象
TypeScript 中的类型声明文件
如果你在 TypeScript 中导入一个模块,而该模块没有类型声明文件,你可能需要创建一个类型声明文件来定义模块的接口。这有助于类型检查和代码补全。
示例
// myModule.d.ts
export default function myDefaultFunction(): void;
export function namedFunction1(): void;
export function namedFunction2(): void;
导入模块的特殊情况
在某些情况下,你可能想要导入模块的类型定义而不需要实际使用其运行时值。这时,你可以使用 import type
语法(TypeScript 特定)来导入类型定义。
示例
import type { MyType } from "./types";
总结来说,是否需要在 import
语句中使用花括号取决于你要导入的内容是默认导出还是命名导出。默认导出不需要花括号,而命名导出需要使用花括号来指定具体的导出项。
评论 (0)