在 TypeScript 中,如何导入一个默认导出的变量、函数或类?
在 TypeScript 中,如果要导入一个默认导出的变量、函数或类,可以使用 import 关键字结合 default 关键字来引用默认导出的成员。
假设在一个 TypeScript 文件中有以下默认导出的变量和函数:
代码语言:javascript复制// file.ts
const variable1 = 123;
export default function() {
// ...
}
要导入默认导出的成员,可以使用以下语法:
代码语言:javascript复制// main.ts
import customFunction from './file';
customFunction(); // 调用默认导出的函数
在上述代码中,import 语句使用 default 关键字引入了 file.ts 文件中的默认导出的函数。然后,我们可以使用 customFunction() 来调用默认导出的函数。
如果默认导出的是一个变量或类,使用方式类似:
代码语言:javascript复制// file.ts
export default class MyClass {
// ...
}
typescript
Copy
// main.ts
import CustomClass from './file';
const instance = new CustomClass(); // 创建默认导出的类的实例
需要注意的是,默认导出的成员没有使用花括号 {} 包裹,而是直接赋值给导入的变量名,且变量名可以任意指定。
如果一个模块中既有默认导出,又有具名导出,可以使用混合导入的方式:
代码语言:javascript复制// 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 关键字导出每个变量或函数。 例如:
代码语言:javascript复制export const variable1 = 123;
export function function1() {
// ...
}
export class MyClass {
// ...
}
方式二:批量导出
另一种方式是使用 export 关键字结合对象字面量语法来批量导出多个变量或函数。 例如:
代码语言:javascript复制const variable1 = 123;
function function1() {
// ...
}
class MyClass {
// ...
}
export {
variable1,
function1,
MyClass,
};
方式三:默认导出
还可以使用 export default 关键字来默认导出一个变量、函数或类。每个文件只能有一个默认导出。 例如:
代码语言:javascript复制const variable1 = 123;
export default variable1;
// 或者
export default function() {
// ...
}
// 或者
export default class MyClass {
// ...
}
在一个文件中同时导出多个变量或函数,使其可以在其他文件中使用。在导入这些导出的成员时,可以使用 import 关键字进行引用。
代码语言:javascript复制import { variable1, function1, MyClass } from './file';
// 或者
import * as myModule from './file';
import 语句用于从 file.ts 文件中导入指定的变量、函数或类,或者使用 * as 语法将整个模块作为单个对象导入。