发现TypeScript中同名interface接口会自动合并的特性

TypeScript与jQuery插件开发
最新推荐文章于 2025-06-19 12:29:16 发布
转载 最新推荐文章于 2025-06-19 12:29:16 发布 · 802 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xxcanghai/p/4819428.html
文章标签：

#javascript #ViewUI

本文探讨了使用TypeScript为jQuery编写插件时遇到的一个有趣现象：可以在TypeScript中定义同名接口，并且这些接口的成员会被自动合并。文章还讨论了这种行为与C#等语言的区别以及可能的原因。

今天在学习怎么用TypeScript给jQuery写扩展插件时发现一个很有趣的事情

如上图，VS提示我应该在类C中实现b。

我可以同时定义一个重名的接口，而这个接口内容会自动合并。

这再C#中是绝对不允许的，除非在不同的命名空间中。

 

但如果我在重名接口中定义相同名称的属性会报重名错误。

也就说并不是js中的后定义的覆盖先前定义的内容。

 

虽然这些接口信息在编译都不复存在，在这个自动合并的特性还是有些让人费解。

应该是为了照顾js中的随意扩充对象的特性。

 

转载于:https://www.cnblogs.com/xxcanghai/p/4819428.html

【TypeScript】TS中type和interface在类型声明时的区别（十二）
编码世界
04-24 1万+
在TS中`interface` 和 `type`都可以用来自定义数据类型，两者有许多相同之处，但是也有差别。我们一般选择 `type` 来定义基本类型别名、联合类型、元组等类型，而选择 `interface` 来定义复杂的对象、类、以及进行接口的继承。
TypeScript 中高级应用与最佳实践
_
02-03 783
TypeScript 中高级应用与最佳实践 当我们讨论 TypeScript 时，我们在讨论什么？ TypeScript 的定位 JavaScript 的超集 编译期行为 不引入额外开销 不改变运行时行为 始终与 ESMAScript 语言标准一致 (stage 3 语法) TypeScript 中的 Decorator 较为特殊，为 Angular 团队和 TypeScript 团队交易的结果，有兴趣可自行搜索相关资料。而且近期 EcmaScript 规范中的 decorator
Typescript 合并接口
读心悦
07-14 893
在TypeScript中，合并接口（Interface Merging）是一种强大的特性，它允许你扩展现有的接口，无论是通过声明合并还是在同一个声明块中直接扩展。这种特性在基于类的面向对象编程中非常有用，但TypeScript的接口合并也适用于函数、枚举等。
TypeScript的奇怪操作之 - 接口的合并
northcastle的博客
11-03 367
type script 中的接口自动合并
TypeScript 声明合并（Declaration Merging）详解
2401_86373285的博客
06-19 758
声明合并（Declaration Merging）是指：当 TypeScript 编译器遇到多个同名的声明时，会将它们合并为一个声明，最终这个合并声明具备所有原始声明的特性。简而言之，就是多个同名声明 → 一个完整的复合声明。合并类型是否支持interface 与 interface✅namespace 与 namespace✅namespace 与 class✅namespace 与 function✅namespace 与 enum✅。
typescript interface 覆盖
小漠007的专栏
05-11 4416
我们想对Antd的TimePicker组件进行封装，理由在于他必须接受一个moment对象，而我们的后端接口给我们的是字符串对象。 于是，我们想要 一个接受字符串，onchange时候传回来format后的字符串这样一个组件。 因为我们这个组件的大多数属性和原来TimePicker的props是一样的，所以我们直接继承它 import type { TimePickerProps } from 'antd'; interface TimePickerPropsPlus extends T
class继承多个interface, 多个interface里面名字又同名了,咋办
洪晓鸿
03-31 1621
当一个类实现了多个接口，并且这些接口中具有重名的方法时，需要在实现类中解决这种冲突。在实现类中提供一个新的方法实现，覆盖接口中的默认方法。使用“super”关键字指定要使用哪个接口的默认实现。在处理这种情况时，请确保清楚地理解接口之间的关系以及预期的行为。根据实际需求，选择合适的解决方案，以确保代码的正确性和可维护性。
typescript中interface和type的使用
03-26 1097
typescript中interface和type的使用 文章目录typescript中interface和type的使用interface（接口）type（类型别名）总结 interface（接口） 声明对象或者函数，通过extends继承拓展 // 描述对象 interface IUser { name: string, age: number, sayHi: () => void // sayHi(): void } const user: IUser = { name:
【TS】TypeScript中的接口(Interface):对象类型的强大工具
热门推荐
鑫宝的博客
07-29 1万+
在TypeScript中,接口是一种用于定义对象类型的方式。它描述了一个对象应该具有的属性和方法,但不包含实现细节。接口可以看作是一种"契约",定义了对象应该遵守的规则。使用interface。
Typescript 中的 interface 和 type 到底有什么区别详解
10-16
这意味着如果你在不同的模块或文件中多次声明同名的`interface`，它们的属性会被合并。例如： ```typescript interface User { name: string; age: number; } interface User { sex: string; } // User ...
【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言」
XH_jing的博客
09-20 2022
【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言、namespace」
TypeScript 中【class类】与 【 接口 Interfaces】的联合搭配使用解读
学而不思则罔,思而不学则殆
08-07 1930
一般来讲，一个类只能继承自另一个类，但有时候不同类之间还会存在有一些共有的特性，这时候就可以把共有的特性提取整合为接口（interfaces），用 【implements】 关键字 来实现。这个特性大大提高了面向对象的灵活性。
【Typescript】Interface和type的区别；探讨为什么interface赋值给Record需要索引签名
weixin_57208584的博客
07-15 605
因此此刻的MyInterface并不一定是最终的类型结构，后续的合并可能会存在类型不与Record一致的情况。Record限制了属性的类型和值的类型。而Interface由于可以声明合并，3、type可以被基础类型定义，而interface仅可以描述对象结构的类型。Interface基于extends继承扩展基类类型，而type利用。声明同名的类型，Interface同名会合并，而type重名会报错。1、Interface可以声明合并，type不行。一、Interface与type的区别。
React和TypeScript应用技巧
m0_57307213的博客
09-22 623
typescript应用技巧
【第9篇】TypeScript声明合并Merging 案例代码详解
jilongliang的专栏
08-08 2954
TypeScript声明合并Merging 案例代码详解
TypeScript基础入门之声明合并(一)
zhangda89的专栏
10-16 2221
转发 TypeScript基础入门之声明合并(一) 声明合并 介绍 TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。 TypeScript特别独特的一个例子是"声明合并"的概念。 在使用现有JavaScript时，理解此概念将为您提供优势。 它还为更高级的抽象概念打开了大门。 出于本文的目的，"声明合并"意味着编译器将使用相同名称声明的两个单独声明合并到...
TypeScript 中的声明合并
lostdeer
06-03 625
声明合并是指当 TypeScript 遇到多个同名的声明时，会将它们合并为一个单一的声明。在进行声明合并时，TypeScript 会根据不同类型的声明进行不同的合并规则，包括接口、类、函数等。当多个命名空间具有相同的名称时，它们会合并为一个命名空间，并且合并后的命名空间包含了原始命名空间中的所有内容。在 TypeScript 中，接口可以相互扩展，并且当多个接口具有相同的名称时，它们会被自动合并为单一的接口。对于类的合并，如果类具有相同名称的静态成员，则这些成员将被合并到一个类中。
TypeScript-类和接口、类和泛型、接口合并现象
lihui61357457的博客
05-26 729
详情可见 1.类和接口 1.类"实现"接口 interface PersonInterface { name:string; say():void; } // 只要实现的某一个接口, 那么就必须实现接口中所有的属性和方法 class Person implements PersonInterface{ name:string = 'lnj'; say():void{ console.log(`我的名字叫:${this.name}`); } } let
TypeScript---Ts接口和类总结
maidu_xbd的博客
03-25 4019
一、接口 1、【接口】是对象的状态（属性）和行为（方法）的抽象（描述）。接口是一种类型，是一种规划、约束 2、【属性】readonly：只读属性、？：可选属性 interface IPerson { readonly id: number //只读属性 name: string age: number sex?: string //可选属性 } const person1: IPerson = { id:1, name: 'tom', age: 20, // s
TypeScript 中的 interface 和 type 有什么区别？
最新发布
09-10
在 TypeScript 中，`interface` 和 `type` 都可以用于定义对象类型，但它们在语义和使用场景上有一些关键区别。理解它们的异同可以帮助你写出更清晰、更安全的类型定义，特别是在 Vue 3 中定义 `props`、`emits`、`store` 等结构时尤为重要。 --- ### ✅ 一、基本用法对比 #### 1. `interface` ```ts interface User { id: number name: string } ``` #### 2. `type` ```ts type User = { id: number name: string } ``` 两者在定义对象结构时几乎完全相同，都可以被用来定义 Vue 组件的 `props` 类型、函数参数类型等。 --- ### ✅ 二、主要区别 | 特性 | `interface` | `type` | |------|-------------|--------| | **可扩展性（声明合并）** | ✅ 支持多次声明合并 | ❌ 不支持 | | **联合类型** | ❌ 不支持 | ✅ 支持 | | **元组、基本类型别名** | ❌ 不适合 | ✅ 支持 | | **映射类型、条件类型** | ❌ 有限支持 | ✅ 支持 | --- ### ✅ 三、详细对比说明 #### 1. 声明合并（Declaration Merging） `interface` 支持同名接口的多次声明，TypeScript 会自动合并它们： ```ts interface User { id: number } interface User { name: string } // 实际等价于： // interface User { // id: number // name: string // } ``` `type` 不支持这种行为，重复定义会报错： ```ts type User = { id: number } type User = { name: string } // ❌ Error: Duplicate identifier 'User' ``` #### 2. 联合类型（Union Types） `type` 可以使用联合类型来定义多个可能的类型： ```ts type ID = number | string type Result = 'success' | 'error' ``` `interface` 不支持联合类型。 #### 3. 类型别名 vs 接口（语义差异） - `type` 更适合用于**类型别名**、**联合类型**、**交叉类型**、**映射类型**等高级类型操作。 - `interface` 更适合用于描述**对象形状**，特别是需要被实现（`implements`）的类结构。 #### 4. 映射类型和条件类型 `type` 支持更复杂的类型操作，例如： ```ts type PartialUser = Partial<User> type ReadonlyUser = Readonly<User> type MyType = T extends U ? true : false ``` 这些在 `interface` 中无法实现。 --- ### ✅ 四、Vue 3 使用建议 在 Vue 3 中定义组件的 `props`、`emits`、`store` 等类型时，推荐使用 `interface` 来描述对象结构，因为它更清晰、可读性强，并且可以被类实现（如组件逻辑抽离到类中时）。 ```ts interface User { id: number name: string } defineComponent({ props: { user: { type: Object as PropType<User>, required: true } }, setup(props) { // ... } }) ``` 而当你需要定义联合类型、映射类型、泛型等高级类型时，使用 `type` 更合适： ```ts type Theme = 'light' | 'dark' type StoreState = { user: User | null } ``` --- ### ✅ 五、总结对比表 | 特性 | `interface` | `type` | |------|-------------|--------| | 定义对象结构 | ✅ | ✅ | | 支持声明合并 | ✅ | ❌ | | 支持联合类型 | ❌ | ✅ | | 支持基本类型别名 | ❌ | ✅ | | 支持映射类型/条件类型 | ❌ | ✅ | | 更适合定义组件类型 | ✅ | ⚠️ | | 更适合高级类型操作 | ❌ | ✅ | --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值