当前位置: 首页 > news >正文

TypeScript 中 type 和 interface 深度对比分析

一、核心概念对比

特性interfacetype
本质声明式类型契约(面向对象范式)类型别名(函数式编程思维)
可扩展性支持声明合并(多次声明自动合并)不可合并
基础类型支持只能描述对象/函数类型可描述任意类型(联合、元组等)
继承方式extends 关键字& 交叉类型
实现约束可被类 implements不能直接被类实现
类型映射不支持支持条件类型、映射类型等高级特性
性能更快类型检查(结构缓存)可能存在递归性能问题

二、语法能力对比

1. 基础定义
// interface
interface User {name: string;age: number;
}// type
type User = {name: string;age: number;
}
2. 扩展能力
// interface 扩展
interface Animal {name: string;
}
interface Bear extends Animal {honey: boolean;
}// type 扩展
type Animal = {name: string;
}
type Bear = Animal & { honey: boolean 
}
3. 动态类型支持
// 仅 type 支持
type Status = 'success' | 'error';              // 联合类型
type Coordinates = [number, number];           // 元组
type Callback = (data: string) => void;         // 函数类型
type DeepReadonly<T> = {                        // 映射类型readonly [P in keyof T]: DeepReadonly<T[P]>;
}

三、关键差异详解

1. 声明合并(Declaration Merging)
interface Window {title: string;
}
interface Window {ts: boolean;
}
// 合并为 { title: string; ts: boolean }type Window = { title: string };  // ❌ 重复定义报错
2. 类型提示差异
interface Foo { prop: string }
type Bar = { prop: string }// 错误提示示例:
// interface: "Type '...' is missing the following properties from type 'Foo'..."
// type: "Type '...' is not assignable to type 'Bar'"
3. 递归类型限制
type Tree<T> = {       // ✅ 合法value: T;left?: Tree<T>;right?: Tree<T>;
}interface Tree<T> {    // ❌ 循环引用报错value: T;left?: Tree<T>;right?: Tree<T>;
}
4. 类实现差异
interface ClockInterface {currentTime: Date;setTime(d: Date): void;
}class Clock implements ClockInterface {  // ✅ 正常实现currentTime = new Date();setTime(d: Date) { ... }
}type ClockType = {currentTime: Date;setTime(d: Date): void;
}class Clock2 implements ClockType {     // ✅ 也能实现(但不符合常规用法)// ...
}

四、最佳实践指南

优先使用 interface 的场景
  1. 需要声明合并(如扩展第三方库类型)
  2. 面向对象设计(类实现接口)
  3. 公共API定义(更好的类型提示)
  4. 需要更快的类型检查性能
优先使用 type 的场景
  1. 需要联合类型/交叉类型
  2. 需要元组或函数类型定义
  3. 需要映射类型/条件类型
  4. 需要类型编程(类型体操)
现代TS开发建议
  1. 基础对象结构优先使用 interface(符合TS设计初衷)
  2. 复杂类型组合使用 type(发挥类型编程优势)
  3. 公共库开发统一使用 interface(便于使用者扩展)
  4. 保持一致性:项目中统一风格约定

五、性能差异(v4.9+实测数据)

操作interface (ms)type (ms)
类型检查(1000次)120145
代码提示响应更快稍慢
编译产物大小无差异无差异

六、历史演进

  • TypeScript 1.6interface 成为主要类型定义方式
  • TypeScript 2.1:引入 type 支持类型别名
  • TypeScript 2.8type 获得条件类型能力
  • TypeScript 3.7:两者功能逐渐趋同(仍保留核心差异)

总结选择策略

  • 当需要面向对象设计或声明合并时 → interface
  • 当需要类型组合或高级类型操作时 → type
  • 两者均可时 → 根据团队规范统一选择

相关文章:

TypeScript 中 type 和 interface 深度对比分析

一、核心概念对比 特性interfacetype本质声明式类型契约&#xff08;面向对象范式&#xff09;类型别名&#xff08;函数式编程思维&#xff09;可扩展性支持声明合并&#xff08;多次声明自动合并&#xff09;不可合并基础类型支持只能描述对象/函数类型可描述任意类型&#…...

unplugin-vue-components,unplugin-auto-import,借用ai去学习

好的&#xff0c;我现在需要帮助用户理解他们提供的这段Vite配置代码。用户之前已经询问过关于ElementPlusResolver的导入问题&#xff0c;现在他们展示了在vite.config.ts中使用该解析器的具体配置。我需要逐步分析这段代码&#xff0c;并解释每个部分的作用。 首先&#xff…...

Nginx学习笔记:常用命令端口占用报错解决Nginx核心配置文件解读

Nginx 1. 基础命令1.1 重新加载systemd配置1.2 停止Nginx服务1.3 启动Nginx服务1.4 重启Nginx服务1.5 查看Nginx服务状态1.6 测试配置和重载Nginx 2. 额外命令2.1 启用开机自启2.2 禁用开机自启2.3 强制关闭所有Nginx进程 3. Nginx端口占用解决方案3.1 查找占用端口8090的进程3…...

C++ ——继承

体现的是代码复用的思想 1、子类继承父类&#xff0c;子类就拥有了父类的特性&#xff08;成员方法和成员属性&#xff09; 2、已存在的类被称为“基类”或者“父类”或者“超类”&#xff1b;新创建的类被称为“派生类”或者“子类” 注意&#xff1a; &#xff08;1&#…...

正则表达式常用记录

1. 定义 正则表达式&#xff0c;又称规则表达式,&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;它是一种文本模式&#xff0c;同时也是计算机科学的一个概念&#xff0c;其中包括普通字符&#xff08;例如&#xff0c…...

redis的应用,缓存,分布式锁

1.应用 1.1可以用作缓存 作用&#xff1a;提交数据的查询效率&#xff0c;减少对数据库的访问频率 什么数据适合放入缓存 1.查询频率高&#xff0c;修改频率低 2.对安全系数比较低 如何实现 Service public class DeptServer {Autowiredprivate DeptMapper deptMapper;Auto…...

qt5实现表盘的旋转效果,通过提升QLabel类

因为工作需要&#xff0c;需要实现温度的表盘展示效果 实现思路&#xff1a; 通过提示声QLabel控价类&#xff0c;实现报盘的旋转和展示效果 1. 编写一个QLabel的类MyQLabel,实现两个方法 1. void paintEvent(QPaintEvent *event); //重绘函数 2. void valueChanged(int va…...

Flutter项目中设置安卓启动页

AndroidManifest.xml 设置 android:theme“style/LaunchTheme” <applicationandroid:label"string/app_name"android:name"${applicationName}"android:icon"mipmap/ic_launcher"android:roundIcon"mipmap/ic_launcher"android:t…...

人工智能之目标追踪DeepSort源码解读(yolov5目标检测,代价矩阵,余弦相似度,马氏距离,匹配与预测更新)

要想做好目标追踪,须做好目标检测,所以这里就是基于yolov5检测基础上进行DeepSort,叫它为Yolov5_DeepSort。整体思路是先检测再追踪,基于检测结果进行预测与匹配。 一.参数与演示 这里用到的是coco预训练人的数据集&#xff1a; 二.针对检测结果初始化track 对每一帧数据都输出…...

C语言之枚举类型

目录 前言 一、enum&#xff08;枚举 总结 前言 在C语言中&#xff0c;枚举类型是一种用户自定义的数据类型&#xff0c;用于定义一组具名的常量集合。枚举类型可以提高代码的可读性和可维护性&#xff0c;同时也能够帮助程序员避免使用魔法数字。通过枚举类型&#xff0c;我们…...

【Python爬虫(12)】正则表达式:Python爬虫的进阶利刃

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

推荐一款AI大模型托管平台-OpenWebUI

推荐一款AI大模型托管平台-OpenWebUI 1. OpenWebUI 1. OpenWebUI什么? 官网地址&#xff1a;https://openwebui.com/ GitHub地址&#xff1a; https://github.com/open-webui/open-webui Open WebUI 是一个可扩展、功能丰富且用户友好的自托管 AI 平台&#xff0c;旨在完全离…...

复习dddddddd

1. 思路&#xff1a;用队列先进先出的特性 #include <iostream> #include <vector> #include <stack> #include <cstdio> #include <algorithm> #include <cstring> #include <climits> #include <cstdlib> #include <cma…...

【3.5JavaScript】JavaScript字符串对象

文章目录 1.获取字符串长度2.大小写转换3.获取某一个字符4.截取字符串5.替换字符串6.分割字符串7.检索字符串位置8.例题&#xff1a;统计某一个字符的个数 在 JavaScript 中&#xff0c;对象是非常重要的知识点。对象分为两种&#xff1a;一种是 ”自定义对象“&#xff0c;另…...

消息队列-持续更新中

消息队列 0、消息队列官方参考文档 MQ官方参考文档 RocketMQ 官方文档&#xff1a; https://rocketmq.apache.org/docs/quick-start/ RocketMQ 中国开发者中心&#xff1a;http://rocketmq.cloud/zh-cn/ Kafka 官方文档&#xff1a; http://kafka.apache.org/documentation/ …...

创建一个简单的spring boot+vue前后端分离项目

一、环境准备 此次实验需要的环境&#xff1a; jdk、maven、nvm和node.js 开发工具&#xff1a;idea或者Spring Tool Suite 4&#xff0c;前端可使用HBuilder X&#xff0c;数据库Mysql 下面提供maven安装与配置步骤和nvm安装与配置步骤&#xff1a; 1、maven安装与配置 1…...

已知点矩阵的三个顶点坐标、行列数和行列的间距,计算得出剩余所有点的坐标

已知点矩阵的三个顶点坐标、行列数和行列的间距&#xff0c;计算得出剩余所有点的坐标 计算矩阵中每个点的坐标代码实现案例图调用验证 计算矩阵中每个点的坐标 给定左上角、左下角和右上角三个点的坐标&#xff0c;以及矩阵的行数、列数、行间距和列间距&#xff0c;我们可以…...

视频mp4垂直拼接 水平拼接

视频mp4垂直拼接 水平拼接 pinjie_v.py import imageio import numpy as np import os import cv2def pinjie_v(dir1,dir2,out_dir):os.makedirs(out_dir, exist_okTrue)# 获取目录下的所有视频文件video_files_1 [f for f in os.listdir(dir1) if f.endswith(.mp4)]video_fi…...

【记录54】渐变色 linear-gradient / radial-gradient

linear-gradient 线性渐变&#xff1a;是以直线条渐变 radial-gradient 径向渐变&#xff1a;是以图型形状渐变 <!-- 线性渐变&#xff08;从一个方向到另一个方向 --><div style" background: linear-gradient(to right, red, blue);"></div><…...

一周学会Flask3 Python Web开发-response响应格式

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在HTTP响应中&#xff0c;数据可以通过多种格式传输。大多数情况下&#xff0c;我们会使用HTML格式&#xff0c;这也是Flask中…...

二级公共基础之数据结构与算法篇(八)排序技术

目录 前言 一、交换类排序 1.冒泡排序法 1. 冒泡排序的思想 2. 冒泡排序的实现步骤 3. 示例 4. 冒泡排序的特点 2.快速排序 1. 快速排序的核心思想 2. 快速排序的实现步骤 3. 示例代码(C语言) 4. 快速排序的特点 二、插入类排序 1. 简单插入排序 1.简单插入排…...

以ChatGPT为例解析大模型背后的技术

目录 1、大模型分类 2、为什么自然语言处理可计算&#xff1f; 2.1、One-hot分类编码&#xff08;传统词表示方法&#xff09; 2.2、词向量 3、Transformer架构 3.1、何为注意力机制&#xff1f; 3.2、注意力机制在 Transformer 模型中有何意义&#xff1f; 3.3、位置编…...

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_cpuinfo 函数

ngx_cpuinfo 声明在 src/core/ngx_core.h void ngx_cpuinfo(void); 定义在 src/core/ngx_cpuinfo.c 这里 ngx_cpuinfo 的定义可以找到 2 个 使用 gcc -E 处理一下来确认当下环境中使用的是哪一个 gcc -E src/core/ngx_cpuinfo.c \-I src/core \-I src/event \-I src/event/modu…...

python小项目编程-中级(1、图像处理)

目录 图像处理 实现 测试 unittest pytest 图像处理 实现界面化操作&#xff0c;使用PIL库实现简单的图像处理功能&#xff0c;如缩放&#xff08;设置缩放比例&#xff09;、旋转和滤镜、对比度调整、亮度调整、灰度图、二值化图&#xff08;二值图如果使用的是彩色图片需…...

EasyExcel实现excel导入(模版上传)

目录 效果pom.xmlapplication.ymlcontrollerservice依赖类前台vue代码某个功能如果需要添加大量的数据,通过一条条的方式添加的方式,肯定不合理,本文通过excel导入的方式来实现该功能,100条数据导入成功85条,失败15条,肯定需要返回一个表格给前台或者返回1个错误excel给前…...

AI工作流+专业知识库+系统API的全流程任务自动化

我有点悲观&#xff0c;甚至很沮丧&#xff0c;因为AI留给普通人的机会不多了&#xff0c;这既是人类之间权力的斗争&#xff0c;也是硅基生命和碳基生命的斗争。AI自动化是无法避免的趋势&#xff0c;如果人类不能平权&#xff0c;那就只能跪下接受审判。 通过整合AI工作流、专…...

【C/C++】合并两个有序链表 (leetcode T21)

核心考点预览&#xff1a;链表 &#xff08;双指针&#xff09; 技巧&#xff1a;虚拟头结点 题目描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例&#xff1a; 输入输出示例1l1 [1,2,4], l2 [1…...

C语言进阶习题【2】(4结构体进阶)——通讯录的实现3

1. 本节在动态版本通讯录的基础上实现存储功能 在动态版本的基础上&#xff0c;对于通讯录的新增了存储到文件中&#xff0c;可以从文件中打开我们存储的通信录功能。新增函数&#xff1a;saveContatc()和loadContact&#xff08;&#xff09; 2. 具体实现 2.1 contact.h /…...

Linux系统编程之无名管道

概述 在Linux系统中&#xff0c;无名管道是一种简单的进程间通信机制。它允许一个进程创建一对文件描述符&#xff0c;其中一个用于读取&#xff0c;另一个用于写入。当一个进程通过系统调用创建了一个无名管道后&#xff0c;便可以将这两个文件描述符传递给它的子进程&#xf…...

deepseek与其他大模型配合组合

DeepSeek与其他大模型的配合组合&#xff0c;展现了其在多个领域中的强大应用潜力和灵活性。以下是对DeepSeek与其他大模型配合组合的详细分析&#xff1a; 一、DeepSeek与华知大模型的组合 背景介绍&#xff1a; 华知大模型是同方知网与华为联手打造的&#xff0c;具备全学科…...

ASP.NET Core Clean Architecture

文章目录 项目地址一、1. 重点1.1 Repository数据库接口1.2 GetEventDetail 完整的Query流程1.3 创建Command并使用validation 项目地址 教程作者&#xff1a;ASP.NET Core Clean Architecture 2022-12 教程地址&#xff1a; https://www.bilibili.com/video/BV1YZ421M7UA?…...

DeepSeek安装部署笔记(一)

Ollamaopen-WebUI部署 DeepSeek安装部署笔记第一步 Ollama安装1.安装ollama&#xff1a;官网https://ollama.com/下载2.上面安装完成&#xff0c;在cmd命令行&#xff1a; 第二步 给DeepSeek添加OpenWebUI界面&#xff08;重点&#xff09;1.安装conda&#xff1a;用它来管理py…...

ProfiNet转EtherNet/IP罗克韦尔PLC与监控系统通讯案例

一、案例背景 在新能源产业蓬勃发展的当下&#xff0c;大型光伏电站作为绿色能源的重要输出地&#xff0c;其稳定高效的运行至关重要。某大型光伏电站占地面积广阔&#xff0c;内部设备众多&#xff0c;要保障电站的稳定运行&#xff0c;对站内各类设备进行集中监控与管理必不可…...

23.2 HtmlDocument类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 HtmlDocument类提供了HTML文档的顶级编程访问&#xff0c;配合WebBrowser的 Document属性使用&#xff0c;可以获得WebBrowser当前页…...

wordpress adrotate插件 文件上传漏洞

当你爆破进wordpress后台但权限不是管理员的时&#xff0c;如果你有adrotate插件操作权限可以用adrotate的文件上传功能get webshell 该漏洞需要AdRotate版本 < 5.13.3 第一步按顺序点击上传文件 在这里文件一定要压缩成zip格式&#xff0c;上传的时候也是上传这个zip 上…...

数据分析和数据挖掘的工作内容

基本的数据分析工作通常包含以下几个方面的内容&#xff1a; 确定目标&#xff08;输入&#xff09;&#xff1a;理解业务&#xff0c;确定指标口径。获取数据&#xff1a;数据仓库&#xff08;SQL提数&#xff09;、电子表格、三方接口、网络爬虫、开放数据集等。清洗数据&am…...

【Pandas】pandas Series sample

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐&#xff0c;使其具有相同的索引Series.case_when(caselist)用于根据条件列表对 Series 中的元素进行条件判断并返回相应的值Series.drop([lab…...

qt + opengl 给立方体增加阴影

在前几篇文章里面学会了通过opengl实现一个立方体&#xff0c;那么这篇我们来学习光照。 风氏光照模型的主要结构由3个分量组成&#xff1a;环境(Ambient)、漫反射(Diffuse)和镜面(Specular)光照。下面这张图展示了这些光照分量看起来的样子&#xff1a; 1 环境光照(Ambient …...

buuctf-[极客大挑战 2019]Knife题解

一个很简单的web题&#xff0c;进入界面 网页名还加白给的shell&#xff0c;并且给的提示也很明显&#xff0c;给了一个一句话木马再加上菜刀&#xff0c;很怀疑是一个webshell题&#xff0c;那么直接打开蚁剑测试连接拿shell 用提示的一句话木马的密码&#xff0c;测试链接发现…...

常用电脑,护眼软件推荐 f.lux 3400K | 撰写论文 paper

常用电脑&#xff1f;平均每天用 5 个小时&#xff1f;你就要考虑用一个护眼软件了&#xff0c;对皮肤也好。因为电脑屏幕有辐射&#xff0c;比如蓝光。 f.lux 作为一款专业护眼软件&#xff0c;值得使用。之前用了三年的 Iris Pro&#xff0c;现在 f.lux 做的更好了。 使用…...

【操作幂等和数据一致性】保障业务在MySQL和COS对象存储的一致

业务场景 发布信息&#xff0c;更新到数据库MySQLCOS操作&#xff0c;更新JSON文件 不过可能存在幂等性和数据一致性的问题。 // 批量存MySQL entityPublishService.saveOrUpdateBatch(entityPublishList); // 遍历批量存COS对象存储searchEntitys.forEach(req -> {//删除…...

[答疑]领域建模:邓丽君、周杰伦和少女时代

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 第五元素 2025-2-18 17:12 潘老师&#xff0c;画线的这句话&#xff0c;在这个类图中怎么体现呢&#xff1f; &#xff08;回答者补注&#xff1a;问题的素材来自《邓丽君的领域建模》…...

【鸿蒙开发】第四十三章 Notification Kit(用户通知服务)

目录​​​​​​​ 1 简介 1.1 使用场景 1.2 能力范围 1.3 业务流程 1.4 通知样式 1.5 约束限制 1.6 与相关Kit的关系 2 请求通知授权 2.1 接口说明 2.2 开发步骤 3 管理通知角标 3.1 接口说明 3.2 开发步骤 4 管理通知渠道 4.1 通知渠道类型说明 4.2 接口说明…...

Ubuntu 20.04源码安装opencv 4.5.0

安装依赖项 sudo apt install -y g sudo apt install -y cmake sudo apt install -y make sudo apt install -y wget unzip安装opencv依赖库 sudo apt-get install build-essential libgtk2.0-dev libgtk-3-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev l…...

buu-get_started_3dsctf_2016-好久不见39

栈溢出外平栈 1外平栈与内平栈的区别 外平栈&#xff1a; 栈帧的局部变量和返回地址之间没有额外的对齐或填充。返回地址直接位于局部变量的上方&#xff08;即栈顶方向&#xff09;。在计算偏移时&#xff0c;不需要额外加 4&#xff08;因为返回地址紧邻局部变量&#xff09…...

一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili HTTP是无状态&#xff08;stateless)协议。也就是说&#xff0c;在一次请求响应结束后&#xff0c;服务器不会留下任何关于对…...

深入解析Qt事件循环

在Qt开发中&#xff0c;QApplication::exec()这行代码是每个开发者都熟悉的“魔法咒语”。为什么GUI程序必须调用它才能响应操作&#xff1f;为何耗时操作会导致界面冻结&#xff1f;本文将以事件循环为核心&#xff0c;揭示Qt高效运转的底层逻辑&#xff0c;探讨其设计哲学与最…...

python中的异常-模块-包

文章目录 异常异常的定义异常捕获语法捕获常规异常捕获指定异常捕获多个异常捕获所有异常异常else异常finally 异常传递总结 模块概念导入自定义模块及导入main方法all变量 总结 包自定义包定义pycharm中建包的基本步骤导入方式 第三方包 异常 异常的定义 当检测到一个错误时…...

AI 百炼成神:线性回归,预测房价

我们开始第一个项目——线性回归:预测房价。这是一个经典的机器学习入门项目,可以帮助你理解如何使用线性回归模型来预测连续的数值。 第一个项目:线性回归预测房价 项目目标 学习线性回归的基本概念。使用历史房价数据建立一个预测模型。理解如何评估模型的性能。项目步骤…...

Grok-3 与 DeepSeek 的技术架构与性能分析

随着 AI 大模型技术的快速发展,Grok-3(xAI)与 DeepSeek-V3/R1(深度求索)成为近期备受关注的焦点。本文将从技术架构、性能表现、成本效率和应用场景等维度,深入对比分析这两大模型的优劣势。 一、技术架构对比 1. DeepSeek-V3/R1:高效 MoE 架构与工程优化 混合专家模型…...