news 2026/7/9 23:39:57

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/7/10 4:31:55

Open-AutoGLM高效开发实战(拖拽式流程设计全曝光)

第一章&#xff1a;Open-AutoGLM高效开发概览Open-AutoGLM 是一个面向生成式语言模型自动化开发的开源框架&#xff0c;旨在简化从模型训练、微调到部署的全流程。其核心设计理念是通过声明式配置与模块化组件结合&#xff0c;提升开发效率并降低使用门槛。核心特性 支持多后端…

作者头像 李华
网站建设 2026/7/10 13:31:03

Excalidraw项目空间组织结构设计

Excalidraw项目空间组织结构设计 在远程协作成为常态的今天&#xff0c;团队沟通中最缺失的是什么&#xff1f;不是视频会议里的面孔&#xff0c;也不是即时消息中的文字&#xff0c;而是那块可以随手涂画、边说边改的白板。真实会议室里&#xff0c;一张草图往往胜过千言万语&…

作者头像 李华
网站建设 2026/7/10 11:11:56

错过后悔一年:Open-AutoGLM即将闭源,现在是最后的免费使用窗口期!

第一章&#xff1a;Open-AutoGLM 技术支持效率提升Open-AutoGLM 是一款基于开源大语言模型&#xff08;LLM&#xff09;的自动化代码生成与技术支持平台&#xff0c;专为开发者和运维团队设计&#xff0c;旨在显著提升技术响应速度与问题解决效率。通过深度集成自然语言理解能力…

作者头像 李华
网站建设 2026/7/10 0:08:47

6、电脑文件操作与媒体播放全攻略

电脑文件操作与媒体播放全攻略 在日常使用电脑的过程中,我们经常需要对各种文件进行操作,同时也会涉及到媒体文件的播放等功能。下面将为大家详细介绍电脑文件操作以及媒体播放的相关知识和操作步骤。 1. 刻录音乐文件到 CD 如果你想将电脑中的音乐文件刻录到 CD 上,可按…

作者头像 李华
网站建设 2026/7/10 12:23:13

测试工具选型指南:为软件测试从业者打造的实用手册

在当今快速迭代的软件开发环境中&#xff0c;测试工具的选择直接影响项目的效率、质量和成本。对于软件测试从业者而言&#xff0c;一个合适的测试工具不仅能提升测试覆盖率&#xff0c;还能优化团队协作&#xff0c;降低维护负担。然而&#xff0c;市场上工具琳琅满目&#xf…

作者头像 李华
网站建设 2026/7/10 13:38:27

11、互联网浏览与电子邮件使用指南

互联网浏览与电子邮件使用指南 1. 网页导航 在浏览网页时,我们常常需要返回之前访问过的页面,或者前进到后续访问过的页面。Internet Explorer 提供了便捷的操作方法。 - 返回上一页 :只需点击“Back”按钮,即可显示上一个访问的页面。 - 返回多个页面 :点击“Rece…

作者头像 李华