TypeScript 中 `type` 和 `interface` 的区别
2024-08-07
746 字约 3 分钟
...基本概念:type 和 interface 究竟是啥?
type
type 就是类型别名,用来给各种类型起个名字。可以是基本类型、对象类型、联合类型、交叉类型、元组等。
type Name = string;
type ID = number | string;
type Point = { x: number; y: number };
type PointArray = [number, number];
interface
interface 则专注于定义对象的结构和行为。它更像是面向对象编程中的蓝图,描述了对象应该拥有哪些属性和方法。
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeID: number;
}
用途和功能:什么时候用 type,什么时候用 interface?
type 的用途和功能
- 复杂类型组合:
type非常适合定义联合类型、交叉类型和元组。 - 灵活性高:可以进行类型变换,比如条件类型和映射类型。
type UnionType = string | number | boolean;
type Point = { x: number; y: number };
type PartialPoint = Partial<Point>;
interface 的用途和功能
- 描述对象结构:
interface用来定义对象的形状,尤其是面向对象编程中的类和对象。 - 支持多重继承:可以通过
extends关键字扩展一个或多个接口。 - 接口合并:同名接口会自动合并,方便扩展和维护。
interface User {
name: string;
age: number;
}
interface Admin extends User {
permissions: string[];
}
扩展和合并:type 和 interface 的不同之处
type 的扩展
- 交叉类型:用
&来实现类型的组合。
type A = { a: number };
type B = { b: number };
type AB = A & B;
- 无法进行声明合并:如果在不同地方重复定义同一个
type,编译器会报错。
interface 的扩展
- 多重继承:通过
extends关键字扩展一个或多个接口。
interface A {
a: number;
}
interface B {
b: number;
}
interface AB extends A, B {
c: number;
}
- 接口合并:在不同文件中重复声明同一个接口,TypeScript 会自动合并它们。
interface Person {
name: string;
}
interface Person {
age: number;
}
实际使用场景:如何选择 type 和 interface?
使用 type 的场景
- 定义联合类型、交叉类型或复杂类型组合。
type ID = number | string;
type Point = { x: number; y: number };
type PartialPoint = Partial<Point>;
- 进行类型变换,例如映射类型。
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
使用 interface 的场景
- 定义对象的形状,尤其是当对象需要在多个地方被扩展时。
interface User {
name: string;
age: number;
}
interface Admin extends User {
permissions: string[];
}
- 需要利用接口合并功能时,通过重复声明接口来扩展对象的属性。
总结
在 TypeScript 中,type 和 interface 都可以用来定义对象的形状,但它们在功能和使用场景上各有优势。
type更适合用于复杂类型组合、类型变换,以及定义联合类型、交叉类型和元组。interface则在描述对象结构、支持多重继承和接口合并方面表现出色,特别适用于面向对象编程中的类和对象。
选择 type 还是 interface,主要取决于具体需求和使用场景。理解这两者的区别,并根据实际情况灵活应用,能让你的代码更加清晰、灵活和易于维护。
如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →typescript2025-09-26
彻底讲透as const + keyof typeof
一、为什么要 “as const” 1、默认情况下,TS把字面量推断成”宽类型“ 于是你写 ‘foo’ | ‘bar’ 时, 一旦拼错成 ’fooo‘, TS不会拦你。 2、加上 as const ,TS会把它当成”不可变的精确字面量” 数组、对象同理: 二、keyof typeof: 把值世界映射到类型世界 typeof:能把运行时的值变成类型; keyof:能把对象类型变成联合类型 合起来就是:给我一个对象,我立刻推出它所有建的字面...
学习面试
typescript2025-02-26
TypeScript 中的 interface和 type 类型有什么区别?它们各自有什么用途?
在 TypeScript 中, 和 都可以用于定义类型,但它们有一些细微的差异和特定的应用场景。下面我们详细比较它们的 区别 、 相同点 以及 各自的用途 。 一、相同点 1. 描述对象的结构 : 和 都可以用来描述对象的结构。 2. 都支持可选属性和只读属性 : 3. 都可以扩展 (类似于继承)。不过扩展的方式不同(具体见下文)。 二、区别 | 特性 | interface | type | | | | | | 定义方式 | 使用 关...
学习面试面试官
typescript2024-05-13
破案了,为啥TypeScript5.3编译let、const一直是var
啊!2024才学TypeScript还有价值吗?!学的话,就用最新的上。 1.环境 8.15.4 Version 5.3.3 v20.10.0 2.背景&测试 使用pnpm安装了最新的TypeScript5.3.3,开始学习ts类型。 发现不论是let、const使用tsc编译完都是var。强迫症表示ES2016起不能接受var,尝试各种配置tsconfig.json后无效。 为什么let 经过tsc编译后 let= var 简化此图投...
学习
typescript2024-04-28
TS系列篇|类(class)
"不畏惧,不将就,未来的日子好好努力"——大家好!我是小芝麻😄 类(Class)定义了一件事物的抽象特点,包含它的属性和方法 1、定义类 在 中,我们也是通过 关键字来定义一个类, 使用 定义构造函数。 构造函数: constructor 主要用于初始化类的成员变量属性 类的对象创建时自动调用执行 没有返回值 2、类的继承 使用 关键字实现继承,子类中使用 关键字来调用父类的构造函数和方法。 子类继承父类后子类的实例就拥有了父类中的属...
学习
http-网络2026-10-15
OAuth 2.0是什么,以及如何正确接入
一、先从一个需求理解 OAuth 2.0 假设你开发了一个相册整理工具,用户希望它读取某个云盘里的照片。 把云盘密码交给工具,会带来几个问题:工具拿到的权限太大,密码可能泄漏,用户也难以只撤销这个工具的访问。 OAuth 2.0 提供一套 委托授权机制 :用户在云盘自己的页面确认授权,工具取得一个有权限范围和有效期的访问令牌,再用它调用云盘 API。用户的云盘密码不交给工具。 可以把它理解为:给工具一张“限定用途的通行证”。但令牌泄漏同...
学习
前端2026-10-15
前端动画全景指南
一、前端动画到底是什么 前端动画,就是让画面随时间、用户输入或页面状态连续变化。变化的对象可以是按钮的位置、弹窗的透明度、SVG 的线条、Canvas 里的粒子,也可以是三维场景中的镜头。 先把三个问题分开: | 问题 | 常见答案 | | | | | 画什么? | DOM/CSS、SVG、Canvas 2D、GPU 渲染的场景、预制动画素材 | | 怎样变化? | CSS 过渡/关键帧、Web Animations API、逐帧计算、...
学习
评论
请登录后发表评论
去登录