TypeScript 中 interface 和 type 的区别

在 TypeScript 中,interface 和 type 都用于定义类型,但它们有一些关键区别。今天我们就来详细对比它们的特性、使用场景和注意事项,帮你彻底掌握这两个核心概念!


核心区别对比表

特性 interface type
扩展性 支持 extends和 implements 支持交叉类型(&)
合并声明 同名接口会自动合并 同名类型会报错
适用场景 定义对象形状、类实现 复杂类型(联合、元组、条件类型等)
兼容性 更适合面向对象编程 更灵活,适合函数式编程
示例 interface User { name: string } type User = { name: string }

详细解析

1. 扩展与继承

interface :通过 extends 扩展其他接口。

typescript 复制代码
interface Person {
  name: string;
}
interface User extends Person {
  id: number;
}

type :通过交叉类型(&)扩展。

ini 复制代码
type Person = {
  name: string;
};
type User = Person & { id: number };

2. 合并声明

interface:同名接口会自动合并。

kotlin 复制代码
interface User { name: string; }
interface User { age: number; }
// 最终 User 包含 name 和 age

type:同名类型会报错。

ini 复制代码
type User = { name: string; };
type User = { age: number; }; // 报错:重复声明

3. 适用场景

interface 更适合:

  • 定义对象的形状(如 API 响应)。

类的实现(implements)。

typescript 复制代码
interface Animal {
  eat(): void;
}
class Dog implements Animal {
  eat() { console.log("Eating..."); }
}

type 更适合:

定义联合类型、元组、条件类型等复杂类型。

typescript 复制代码
// 联合类型
type Status = "success" | "error";
// 元组
type Point = [number, number];
// 条件类型
type IsString<T> = T extends string ? true : false;

4. 其他区别

type 可以定义原始类型:

typescript 复制代码
type ID = number | string

interface 可以声明类实例的类型:

typescript 复制代码
interface ClockInterface {
  currentTime: Date;
}
class Clock implements ClockInterface {
  currentTime: Date = new Date();
}

如何选择?

  • 默认情况下 :优先使用 interface(更适合面向对象编程)。
  • 需要复杂类型时 :使用 type(如联合类型、条件类型)。
  • 需要合并声明时 :使用 interface。

总结

场景 推荐使用 示例
定义对象形状 interface interface User { name: string }
类实现 interface class X implements Y {}
联合类型/复杂类型 type `type ID = string number`
需要合并声明 interface 同名接口自动合并
相关推荐
怕浪猫11 小时前
GEO 优化到底是什么?AI时代内容创作者必须懂的新技能
算法·面试·github
沙漠之主15 小时前
C++编程教学设计资料:从入门到实战的完整课程方案
java·前端·c++
hasty15 小时前
不上传新包,也能改变用户拿到的版本:npm dist-tag 的 OIDC 权限治理
前端·npm·node.js
Csvn15 小时前
diff 算法(虚拟 DOM Reconciliation)
前端
前端snow16 小时前
ai agent --- 文件存储
前端
Frag0ut16 小时前
Chrome四大版本获取及共存指南:Stable/Beta/Dev/Canary
前端·chrome·浏览器·dev·beta·canary·共存版
IT大白鼠17 小时前
搜索系列 · 第 08 篇——面试收官:高频题与全景总结
elasticsearch·面试·nosql
IT_陈寒18 小时前
SpringBoot自动配置坑了我一把,原来是这样绕过去的
前端·人工智能·后端
广州华水科技18 小时前
单北斗GNSS变形监测在大坝安全监测中的应用与优势
前端
zeng不错18 小时前
B站 173 个投稿活动看到眼瞎?我写了个扩展,主打一个精准打击
前端