TypeScript 中从另一个文件导入接口
要从 TypeScript 中的另一个文件导入接口:
-
从文件 A 中导出接口,例如
export interface Employee {}
。 -
将文件 B 中的接口导入为
import { Employee } from './another-file'
。 - 使用文件B中的界面。
下面是从名为 another-file.ts 的文件中导出接口的示例。
another-file.ts
// 👇️ named export export interface Employee { id: number; name: string; salary: number; }
以下是我们如何在名为 index.ts 的文件中导入 Employee
接口。
index.ts
// 👇️ named import import { Employee } from './another-file'; const emp: Employee = { id: 1, name: 'James', salary: 100, }; console.log(emp);
如果必须,请确保更正指向另一个文件模块的路径。 上面的示例假定 another-file.ts 和 index.ts 位于同一目录中。
例如,如果 another-file.ts 位于一个目录之上,则必须从 import {Employee} from '../another-file'
。
我们在导入时将接口的名称用大括号括起来——这称为命名导入。
TypeScript 使用模块的概念,就像 JavaScript 一样。
为了能够从不同的文件导入接口,必须使用命名或默认导出来导出它。
上面的示例使用命名导出和命名导入。
命名和默认导出和导入之间的主要区别是 - 每个文件可以有多个命名导出,但只能有一个默认导出。
让我们看一个示例,说明如何导入使用默认导出导出的接口。
这是 another-file.ts 的内容。
another-file.ts
// 👇️ default export export default interface Employee { id: number; name: string; salary: number; }
下面是我们如何使用默认导入来导入接口。
index.ts
// 👇️ default import import Employee from './another-file'; const emp: Employee = { id: 1, name: 'James', salary: 100, }; console.log(emp);
请注意
,我们没有将导入内容用花括号括起来。
我们也可以在导入接口时使用不同的名称,例如 Foo。
index.ts
// 👇️ default import import Foo from './another-file'; const emp: Foo = { id: 1, name: 'James', salary: 100, }; console.log(emp);
这有效,但令人困惑,应该避免。
根据我的经验,大多数真实世界的代码库只使用命名导出和导入,因为它们可以更轻松地利用 IDE 进行自动完成和自动导入。
我们也不必考虑使用默认导出或命名导出导出哪些成员。
我们也可以混合搭配。 以下是同时使用默认导出和命名导出的文件示例。
another-file.ts
// 👇️ default export export default interface Employee { id: number; name: string; salary: number; } // 👇️ named export export interface Person { name: string; }
以下是我们将如何导入这两个接口。
index.ts
// 👇️ default and named imports import Employee, { Person } from './another-file'; const emp: Employee = { id: 1, name: 'James', salary: 100, }; console.log(emp); const person: Person = { name: 'Alice', }; console.log(person);
我们使用默认导入来导入 Employee
接口,并使用命名导入来导入 Person 接口。
请注意
,每个文件只能有一个默认导出,但我们可以根据需要拥有任意多个命名导出。
相关文章
使用 ESLint 进行 TypeScript 导入排序
发布时间:2023/03/08 浏览次数:82 分类:编程语言
-
ESLint 是广泛使用的 linter 工具之一。它允许你轻松订购和构建你的导入部分。
在 TypeScript 中声明一个 ES6 Map
发布时间:2023/03/05 浏览次数:181 分类:WEB前端
-
本篇文章将指导我们使用编码示例在 TypeScript 中定义 ES6 Map。 这解释了什么是 ES6 Map及其用途。 让我们首先看看 ES6 是什么以及为什么使用它们。 ES6 Map 在 ES6 之前,我们使用对象通过将
如何在 TypeScript 中合并对象
发布时间:2023/02/20 浏览次数:217 分类:编程语言
-
使用扩展语法 ... 合并 TypeScript 中的对象,例如 const obj3 = { ...obj1, ...obj2} 。 最终对象的类型将被成功推断,因此尝试添加或删除属性会导致类型检查器显示错误。 const obj1 = { name : 迹忆
如何在 TypeScript 中对数组进行排序
发布时间:2023/02/15 浏览次数:196 分类:编程语言
-
在 TypeScript 中对 Numbers 数组进行排序 使用 sort() 方法对 TypeScript 中的数组进行排序,例如 numArray.sort((a, b) = a - b) 。 sort 方法采用定义排序顺序的函数作为参数。 在对数值数组进行排序
如何在 TypeScript 中扩展类型
发布时间:2023/02/15 浏览次数:230 分类:编程语言
-
在 TypeScript 中扩展类型 使用交集类型来扩展 TypeScript 中的类型,例如 type TypeB = TypeA {age: number;} 。交集类型使用 符号定义,用于组合现有对象类型。 我们可以根据需要多次使用 运算符
TypeScript 中如何创建 Date 日期对象
发布时间:2023/02/14 浏览次数:219 分类:编程语言
-
使用 Date 类型在 TypeScript 中键入 Date 对象,例如 const date: Date = new Date() 。 Date() 构造函数返回一个类型为 Date 的对象。 该接口定义了 Date 对象上所有内置方法的类型。 // ?️ const da
在 TS 中使用 {[key:string]: string} 和 {[key:string]: any}
发布时间:2023/02/14 浏览次数:125 分类:编程语言
-
TypeScript 中的 {[key: string]: string} 类型 {[key: string]: string} 语法是 TypeScript 中的索引签名,当我们事先不知道类型属性的所有名称但知道值的形状时使用。 索引签名指定字符串类型的键和