标签搜索

import 语句用于导入模块中,是否需要使用花括号

sunshine
2025-06-30 / 0 评论 / 1 阅读

在 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 语句中使用花括号取决于你要导入的内容是默认导出还是命名导出。默认导出不需要花括号,而命名导出需要使用花括号来指定具体的导出项。

感觉很棒,欢迎点赞 OR 打赏~
0
分享到:

评论 (0)

取消

请先登录后再进行评论或留言