news 2026/3/3 6:18:43

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/2/25 1:00:48

Open-AutoGLM实战指南(自定义任务链构建与优化大公开)

第一章&#xff1a;Open-AutoGLM实战入门与核心概念Open-AutoGLM 是一个面向自动化自然语言处理任务的开源框架&#xff0c;专为简化大语言模型&#xff08;LLM&#xff09;在实际业务场景中的部署与调优而设计。其核心理念是通过声明式配置驱动模型推理、微调与评估流程&#…

作者头像 李华
网站建设 2026/3/2 13:45:57

Open-AutoGLM流程模板实战:3步构建企业级AI推理流水线

第一章&#xff1a;Open-AutoGLM流程模板分享Open-AutoGLM 是一个面向自动化生成语言模型任务的开源流程框架&#xff0c;旨在通过标准化模板提升开发效率与模型复用能力。该框架支持从数据预处理、提示工程构建到模型推理与评估的全流程管理。核心组件结构 config&#xff1a;…

作者头像 李华
网站建设 2026/2/21 16:21:30

手把手教你打造专属AI工作流,Open-AutoGLM高级用法全曝光

第一章&#xff1a;Open-AutoGLM 自定义任务流程概述Open-AutoGLM 是一个面向自然语言处理任务的自动化大模型调用框架&#xff0c;支持用户通过声明式配置快速构建和执行自定义任务。其核心设计理念是将任务拆解为可复用的模块&#xff0c;包括输入解析、指令生成、模型调用、…

作者头像 李华
网站建设 2026/3/2 22:27:09

某次页面加载首屏慢 后来才知道用dns.lookup预解析关键域名

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 目录Node.js&#xff1a;一个程序员的深夜自白&#xff08;附咖啡渍代码&#xff09; 我的Node.js初体验 Node.js的"中年危…

作者头像 李华
网站建设 2026/2/19 21:40:04

【Open-AutoGLM无代码革命】:零基础实现AI流程设计的5大核心技巧

第一章&#xff1a;Open-AutoGLM无代码革命的背景与意义在人工智能技术迅猛发展的今天&#xff0c;大语言模型&#xff08;LLM&#xff09;正逐步成为推动数字化转型的核心引擎。然而&#xff0c;传统AI开发依赖大量编程技能、算力资源和领域知识&#xff0c;限制了其在中小型企…

作者头像 李华