在 TypeScript 中，如何导入一个默认导出的变量、函数或类？

王小婷

发布于 2023-10-16 19:54:28

1.1K00

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

在 TypeScript 中，如何导入一个默认导出的变量、函数或类？

在 TypeScript 中，如果要导入一个默认导出的变量、函数或类，可以使用 import 关键字结合 default 关键字来引用默认导出的成员。

假设在一个 TypeScript 文件中有以下默认导出的变量和函数：

// file.ts
const variable1 = 123;

export default function() {
  // ...
}

要导入默认导出的成员，可以使用以下语法：

// main.ts
import customFunction from './file';

customFunction(); // 调用默认导出的函数

在上述代码中，import 语句使用 default 关键字引入了 file.ts 文件中的默认导出的函数。然后，我们可以使用 customFunction() 来调用默认导出的函数。

如果默认导出的是一个变量或类，使用方式类似：

// file.ts
export default class MyClass {
  // ...
}
typescript
Copy
// main.ts
import CustomClass from './file';

const instance = new CustomClass(); // 创建默认导出的类的实例

需要注意的是，默认导出的成员没有使用花括号 {} 包裹，而是直接赋值给导入的变量名，且变量名可以任意指定。

如果一个模块中既有默认导出，又有具名导出，可以使用混合导入的方式：

// file.ts
const variable1 = 123;

export function namedFunction() {
  // ...
}

export default function() {
  // ...
}
typescript
Copy
// main.ts
import defaultFunction, { namedFunction } from './file';

defaultFunction(); // 调用默认导出的函数
namedFunction(); // 调用具名导出的函数

通过混合导入的方式，可以同时引用默认导出和具名导出的成员。

在 TypeScript 中，如何在一个文件中同时导出多个变量或函数？

在 TypeScript 中，使用 export 关键字来同时导出多个变量或函数。有几种常见的方式可以实现这一点。

方式一：逐个导出

在一个文件中逐个使用 export 关键字导出每个变量或函数。例如：

export const variable1 = 123;
export function function1() {
  // ...
}
export class MyClass {
  // ...
}

方式二：批量导出

另一种方式是使用 export 关键字结合对象字面量语法来批量导出多个变量或函数。例如：

const variable1 = 123;
function function1() {
  // ...
}
class MyClass {
  // ...
}

export {
  variable1,
  function1,
  MyClass,
};

方式三：默认导出

还可以使用 export default 关键字来默认导出一个变量、函数或类。每个文件只能有一个默认导出。例如：

const variable1 = 123;
export default variable1;

// 或者

export default function() {
  // ...
}

// 或者

export default class MyClass {
  // ...
}

在一个文件中同时导出多个变量或函数，使其可以在其他文件中使用。在导入这些导出的成员时，可以使用 import 关键字进行引用。

import { variable1, function1, MyClass } from './file';

// 或者

import * as myModule from './file';

import 语句用于从 file.ts 文件中导入指定的变量、函数或类，或者使用 * as 语法将整个模块作为单个对象导入。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度