news 2026/4/18 0:18:59

TypeScript 接口

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 接口

TypeScript 中的接口(Interface)详解

接口(interface)是 TypeScript 中最常用、最重要的类型定义方式之一,主要用于描述对象的形状(shape),定义对象应该具有哪些属性、方法及其类型。它是 TypeScript 类型系统的核心,帮助实现结构化类型检查(structural typing)。

1. 基本用法:定义对象形状
interfacePerson{name:string;age:number;}letuser:Person={name:"Alice",age:30};// user = { name: "Bob" }; // 错误:缺少 age 属性// user = { name: "Charlie", age: "25" }; // 错误:age 必须是 number

TypeScript 是结构化类型系统:只要对象满足接口要求的形状,即使没有显式声明implements,也能赋值。

letadmin={name:"Eve",age:28,role:"admin"};// 多余属性 roleletp:Person=admin;// OK!TypeScript 允许额外属性(新鲜度检查例外情况见后文)
2. 可选属性(Optional Properties)

使用?表示属性可选:

interfaceBook{title:string;author:string;pages?:number;// 可选readonlyisbn:string;// 只读(见下文)}letnovel:Book={title:"1984",author:"Orwell",isbn:"978-0141036144"// pages 可省略};
3. 只读属性(Readonly Properties)

使用readonly防止属性被修改:

interfacePoint{readonlyx:number;readonlyy:number;}letorigin:Point={x:0,y:0};// origin.x = 10; // 错误:只读
  • 只读数组:readonly string[]ReadonlyArray<string>
letnames:readonlystring[]=["Alice","Bob"];// names.push("Charlie"); // 错误
4. 函数类型(Function Types)

接口可以描述函数形状:

interfaceSearchFunc{(source:string,subString:string):boolean;}letmySearch:SearchFunc=function(src,sub){returnsrc.includes(sub);};mySearch("hello","ell");// true
5. 索引签名(Index Signatures)

允许动态属性名:

interfaceStringDictionary{[key:string]:string;// 键为 string,值为 stringlength:number;// 固定属性必须兼容索引签名类型}letdict:StringDictionary={name:"Alice",job:"Engineer",length:2// OK,number 可赋值给 string(宽松规则)};
  • 也可以是number索引:[index: number]: string
6. 接口继承(Extends)

接口可以继承一个或多个接口:

interfaceAnimal{name:string;}interfaceDogextendsAnimal{breed:string;bark():void;}letdog:Dog={name:"Buddy",breed:"Golden Retriever",bark(){console.log("Woof!");}};

多继承:

interfaceFlyable{fly():void;}interfaceSwimmable{swim():void;}interfaceDuckextendsAnimal,Flyable,Swimmable{quack():void;}
7. 接口 vs 类型别名(type)
特性interfacetype alias
定义对象形状推荐可行
联合类型 / 字面量类型不支持支持
原始类型映射不支持支持(如 `type Id = string
可重复声明(声明合并)支持(同名接口会合并)不支持
实现类(implements)支持不支持(class 只能 implements interface)
扩展方式extends&(交叉类型)

推荐

  • 定义对象/函数形状 → 用interface
  • 需要联合、映射、条件类型 → 用type
8. 声明合并(Declaration Merging)

同名接口会自动合并(非常有用,如扩展第三方库):

interfaceUser{name:string;}interfaceUser{age:number;}// 等价于:interfaceUser{name:string;age:number;}letu:User={name:"Tom",age:25};

常用于扩展全局对象第三方库类型

9. 混合类型(Hybrid Types)

接口可以同时描述对象和函数(少见但强大):

interfaceCounter{(start:number):string;// 作为函数count:number;// 属性reset():void;// 方法}letcounter:Counter=(()=>{letc=0;letfn=function(start:number){c=start;return`Count:${c}`;};fn.count=c;fn.reset=()=>{c=0;};returnfnasCounter;})();
10. 最佳实践建议
建议说明
对象形状优先用 interface可读性强,支持声明合并
可选属性放后面保持一致性
只读属性用于不可变数据如 ID、配置
函数类型复杂时用 interface(params) => return更清晰
扩展第三方库时用 interface利用声明合并
开启"strict": true包括strictPropertyInitialization
小结:接口速查表
特性语法示例
基本接口interface Person { name: string; age: number; }
可选属性pages?: number;
只读属性readonly id: number;
函数属性greet(name: string): void;
索引签名[prop: string]: any;
继承interface Admin extends Person { role: string; }
函数类型接口interface Fn { (x: number): string; }

接口是 TypeScript 中定义对象合约的最优雅方式,结合继承、声明合并等特性,能极大提升大型项目的类型安全和可维护性。

如果您想深入了解类实现接口(implements)接口与抽象类的区别工具类型(如 Partial、Pick)与接口结合,或者需要实际项目示例,请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/18 10:06:27

Open-AutoGLM全流程解析(罕见高阶模板曝光)

第一章&#xff1a;Open-AutoGLM全流程解析概述Open-AutoGLM 是一个面向自动化自然语言理解与生成任务的开源框架&#xff0c;旨在通过统一接口实现从数据预处理、模型训练到推理部署的端到端流程。该框架融合了图神经网络与大语言模型的优势&#xff0c;支持动态任务编排与自适…

作者头像 李华
网站建设 2026/4/18 9:45:49

核心系统出错如何快速恢复?,深度解析Open-AutoGLM自动化回滚机制

第一章&#xff1a;核心系统故障与自动化恢复概述在现代分布式系统架构中&#xff0c;核心系统的稳定性直接决定了服务的可用性。面对硬件失效、网络中断或软件异常等不可预测因素&#xff0c;自动化恢复机制成为保障系统持续运行的关键手段。通过预设监控策略与自愈逻辑&#…

作者头像 李华
网站建设 2026/4/18 8:32:53

河图的演化过程与真相

河图演化如何知&#xff0c;听我细说各原由&#xff0c;首先把河图进行逆朔归源&#xff0c;拆分成上下两部分&#xff0c;也就是奇数与偶数各自独立的状态演化之间&#xff0c;这就叫回归真我本真&#xff0c;属于各自的演化之道。也就形成了奇数组合七五一与三五九的十字&…

作者头像 李华
网站建设 2026/4/18 11:32:33

大数据技术的基于Python的电影票房数据分析系统的设计与实现_70q9k530-爬虫 可视化

文章目录系统截图项目简介大数据系统开发流程主要运用技术介绍爬虫核心代码展示结论源码文档获取定制开发/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&#xff01;系统截图 大数据技术的基于Python的电影票房数据分析系统的设计与实现_70q9k530-爬虫 可视化…

作者头像 李华
网站建设 2026/4/18 12:06:35

7、Windows Vista 文件管理与用户账户使用指南

Windows Vista 文件管理与用户账户使用指南 在日常使用计算机的过程中,我们经常需要对文件进行各种操作,同时如果多人共享一台计算机,也需要进行用户账户的管理。下面将详细介绍 Windows Vista 系统中文件管理和用户账户管理的相关操作。 一、文件操作 1. 文件复制 如果…

作者头像 李华
网站建设 2026/4/17 16:54:51

13、高效利用Windows Vista:日程管理与个性化设置指南

高效利用Windows Vista:日程管理与个性化设置指南 在现代快节奏的生活中,我们的日程安排日益繁忙,需要管理的预约和任务也越来越多。同时,我们也希望自己的电脑能够符合个人的使用习惯和审美需求。Windows Vista提供了强大的工具来帮助我们解决这些问题,下面将为大家介绍…

作者头像 李华