首页/文章/typescript

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、逐帧计算、...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录