ts中interface和type的区别

时间: 2023-06-09 20:07:28 浏览: 117

Typescript 中的 interface 和 type 到底有什么区别详解

5星 · 资源好评率100%

主要介绍了Typescript 中的 interface 和 type 到底有什么区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧在TypeScript中，`interface`和`type`都是用来做类型定义的，它们有相似之处，但也有明显的差异。理解这些区别对于编写高质量的TypeScript代码至关重要。 `interface`和`type`都能用于描述对象类型。例如，我们可以创建一个`User`接口和一个同名的`type`： ```typescript interface User { name: string; age: number; } type User = { name: string; age: number; }; ``` 它们都可以用来定义函数类型，如下所示： ```typescript interface SetUser { (name: string, age: number): void; } type SetUser = (name: string, age: number): void; ``` 两者都可以被`extends`来创建更复杂的类型结构。例如，`interface`可以继承另一个`interface`，而`type`则可以使用`&`操作符来合并类型： ```typescript interface Name { name: string; } interface User extends Name { age: number; } type Name = { name: string }; type User = Name & { age: number }; ``` 尽管`interface`和`type`在很多场景下可以互换使用，但它们有以下显著的不同点： 1. **类型别名（Type Aliases）**：`type`可以定义基本类型别名、联合类型、元组等，而`interface`不能。例如： ```typescript // 基本类型别名 type Name = string; // 联合类型 interface Dog { wong(): void; } interface Cat { miao(): void; } type Pet = Dog | Cat; // 元组 type PetList = [Dog, Pet]; // 使用typeof获取实例类型 let div = document.createElement('div'); type B = typeof div; ``` 2. **类型合并（Type Merging）**：`interface`支持多处声明并合并，而`type`不行。这意味着如果你在不同的模块或文件中多次声明同名的`interface`，它们的属性会被合并。例如： ```typescript interface User { name: string; age: number; } interface User { sex: string; } // User 接口现在是 { name: string; age: number; sex: string } ``` 3. **骚操作（Advanced Usage）**：`type`可以进行更复杂的类型构造，如泛型、递归类型、映射类型等。例如： ```typescript type StringOrNumber = string | number; type Text = string | { text: string }; type NameLookup = Dictionary<string, Person>; type Callback<T> = (data: T) => void; type Pair<T> = [T, T]; type Coordinates = Pair<number>; type Tree<T> = T | { left: Tree<T>, right: Tree<T> }; ``` 4. **实现（Implementation）**：`interface`可以被类实现（`implements`），而`type`不能。这意味着`interface`可以作为约束，确保类的结构符合接口定义。当面临选择`interface`还是`type`时，通常建议优先考虑`interface`，因为它们支持类型合并，这在模块化和共享类型定义时特别有用。然而，如果需要进行更复杂的类型构造或声明类型别名，`type`就是更好的选择。根据具体情况灵活运用这两种类型定义工具，可以更好地组织和控制代码的类型安全。

在 TypeScript 中，interface 和 type 都可以用来定义类型，但它们有一些区别。 interface： - 只能定义对象类型，不能定义基本类型； - 可以被继承和实现； - 可以定义多次，并且会自动合并同名属性； - 可以为属性设置可选、只读等修饰符。 type： - 可以定义任意类型，包括基本类型、联合类型、交叉类型等； - 不能被继承和实现； - 不能定义多次，如果定义了同名类型，则会覆盖之前的类型定义； - 可以使用关键字 typeof 来获取一个变量的类型。总的来说，interface 更适合用来定义对象的结构和方法的形状，而 type 更适合用来定义复杂类型和类型别名。

阅读全文

ts中interface和type的区别

相关推荐

ts中type和interface的区别

ts中interface导出使用

ts interface

11-type_interface的区别.ts

ts接口和type的区别

ts中获取interface的所有键名

ts interface添加属性

在一个导出的hooks.ts文件中使用了 type 或者interface ，ts提示导出函数的返回类型具有或正在使用专用名称xxx

ts 如何判断instanceof interface

vue3中ts和正常ts区别

ts类型 interface I { a: number; b?: number; } 如何实现a为1时，b为必传

ts-sleact-clone:type打字练习在实践中

sml-interface-gen：从XML或JSON生成TS接口

<script lang="ts" setup> import { defineProps } from 'vue' interface TableData { // 定义表格数据的类型 } const props = defineProps({ tableData: { type: Array as () => TableData[], default: () => [] } }) </script>中为什么props没有读取值

type IActiveKey = 'http' | 'dns' | 'ping' | 'tracetroute'; interface IContext{ activeKey: IActiveKey; } const context: IContext = { activeKey: ‘http’ } 帮我更正一下这段react-ts的代码

Vue 3怎么向子组 传递一个 ts type类型

命令手册 Linux常用命令

最新推荐

vue中typescript装饰器的使用方法超实用教程

命令手册 Linux常用命令

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

Vue 3怎么向子组传递一个 ts type类型