文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载本篇技术指南以开源仓库 typescript-book 中《The Concise TypeScript Book》第 49 章「Интерфейс и типInterface 与 Type」为核心系统讲解 TypeScript 中接口interface与类型别名type的通用语法、基础类型注解、对象类型定义以及联合类型Union与交叉类型Intersection的组合用法并结合仓库内differences-between-type-and-interface、object-types、extending-types等章节进一步梳理二者的关键差异与选型建议。读完本文你将能够准确书写对象结构类型、熟练组合联合/交叉类型并依据项目场景做出 interface 与 type 的正确取舍。一、Interface 与 Type 的通用语法在 TypeScript 中接口interface用于定义对象的结构它规定一个对象必须拥有哪些属性property与方法method并给出它们的名称与类型。定义接口的通用语法如下interface InterfaceName { property1: Type1; // ... method1(arg1: ArgType1, arg2: ArgType2): ReturnType; // ... }类型别名type alias同样可以描述对象结构其通用语法为type TypeName { property1: Type1; // ... method1(arg1: ArgType1, arg2: ArgType2): ReturnType; // ... };语法成分逐项解析语法片段含义interface InterfaceName/type TypeName定义接口/类型的名称property1: Type1;声明接口的属性及对应类型多个属性之间用分号分隔method1(arg1: ArgType1, arg2: ArgType2): ReturnType;声明接口的方法方法名 括号内的参数列表 返回类型多个方法同样以分号分隔两种语法的差别在于interface使用关键字直接声明一个命名接口而type采用赋值形式创建一个类型别名其右侧既可以是一个对象类型字面量也可以是任意复杂的类型表达式联合、交叉、元组等。这一点正是理解二者差异的起点。一个接口示例interface Person { name: string; age: number; greet(): void; }上面的Person接口要求任何作为Person使用的对象都必须具备name字符串、age数字两个属性以及一个不返回值的greet方法。一个类型示例type TypeName { property1: string; method1(arg1: string, arg2: string): string; };类型别名以同样的结构语法描述对象形状语义上与接口等价但type的适用范围更广。二、基础类型注解从原始类型到元组TypeScript 中的类型type一方面用于描述数据结构的形状另一方面用于在编译期强制进行类型检查。针对不同的使用场景存在多种常见的类型定义语法以下是几种最基础的写法let myNumber: number 123; // number 类型 let myBoolean: boolean true; // boolean 类型 let myArray: string[] [a, b]; // 字符串数组 let myTuple: [string, number] [a, 123]; // 元组number数值类型涵盖整数与浮点数boolean布尔类型取值为true或falsestring[]元素类型为string的数组也可写作Arraystring[string, number]元组tuple类型限定元素的个数与每个位置的类型——第一个元素必须是字符串第二个必须是数字。仓库中《内置类型原语》章节还系统列出了 TypeScript 的全部内置原语类型包括null表示值缺失、undefined表示尚未赋值或尚未定义、symbol唯一标识符常作为对象属性的键、bigint任意精度整数、any动态类型可持有任意类型的值并绕过类型检查、void表示无任何类型常用于无返回值函数的返回类型以及never表示永不发生的值常用于抛出异常或无限循环函数的返回类型。若需限定元组长度不可变更可使用as const将元组标记为固定长度只读元组见仓库《固定长度元组》章节const x [10, hello] as const; x.push(2); // 错误无法修改固定长度元组三、对象类型与接口直接标注与匿名对象对象类型描述对象的形状即属性的名称、类型以及该属性是否必需或可选。在 TypeScript 中有两种主要的对象类型定义方式其一使用interface定义对象形状指定属性的名称、类型与可选性interface User { name: string; age: number; email?: string; }email?: string中的问号?表示email为可选属性该属性可以省略详见仓库《可选属性》章节type X { a: number; b?: number; // 可选 }; // 可选属性可配合解构默认值使用 const x ({ a, b 100 }: X) a b;其二使用type类型别名定义对象形状。它除了描述对象还可以基于已有类型或多种类型的组合创建新的自定义类型包括联合类型、交叉类型及其他复杂类型type Point { x: number; y: number; };此外还可以匿名地定义对象类型即不为其命名直接在变量或函数参数的位置内联写出结构。例如仓库《对象类型》章节中的示例——对象字面量直接作为函数参数的类型标注const sum (x: { a: number; b: number }) x.a x.b; console.log(sum({ a: 5, b: 1 }));再如下面这种最常见的匿名对象标注方式const x: { name: string; age: number } { name: Simon, age: 7 };关于类型标注的位置仓库《类型注解》章节给出的实践准则是关注类型签名如函数参数与返回类型而不必标注函数体内的局部变量且对象字面量始终建议显式标注类型。四、联合类型与交叉类型组合与复用类型联合类型Union Type联合类型表示一个值可以是若干类型中的任意一种使用|符号连接每个候选类型type MyType string | number; // 联合类型 let myUnion: MyType hello; // 可以是字符串 myUnion 123; // 也可以是数字即string | number类型的变量可以安全地接收字符串或数字中的任意一个。仓库《联合类型》章节给出了最简洁的说明let x: string | number;之后x hello与x 123均合法。交叉类型Intersection Type交叉类型表示一个值同时拥有多个类型的所有属性使用符号连接每个类型。被连接的类型可以是type别名也可以是interfacetype TypeA { name: string }; type TypeB { age: number }; type CombinedType TypeA TypeB; // 交叉类型 let myCombined: CombinedType { name: John, age: 25 }; // 同时具备 name 与 age 两个属性依据仓库《交叉类型》章节的定义交叉类型X Y表示一个值具有X与Y的全部属性。它是构造「组合对象」最直接的手段常用于将基础实体与附加能力合并。五、从源码章节看 Interface 与 Type 的核心差异仓库专门设有《Type 与 Interface 的差异》章节系统对比了二者的四个关键差异可作为实战选型的依据。1. 声明合并Declaration Merginginterface支持声明合并可以多次定义同名接口TypeScript 会将它们合并为一个包含全部属性与方法的新接口而type不支持声明合并。interface A { x: string; } interface A { y: string; } const j: A { x: xx, y: yy, };同名接口A的两段声明被合并最终A同时拥有x与y。这在对既有类型进行补丁或扩展如补充第三方库缺失/错误的类型声明时非常有用。2. 扩展其他类型/接口的语法不同二者都可以扩展其他类型但语法截然不同interface使用extends关键字继承其他接口的属性和方法但不能扩展联合类型这类复杂类型interface A { x: string; y: number; } interface B extends A { z: string; } const car: B { x: x, y: 123, z: z, };type使用运算符将多个类型组合为一个新类型交叉interface A { x: string; y: number; } type B A { j: string; }; const c: B { x: x, y: 123, j: j, };仓库《扩展类型》章节进一步指出extends关键字只适用于接口和类type的扩展只能通过交叉实现并且可以用interface去扩展type反之则不行type A { a: string; }; interface B extends A { b: string; }同时接口支持从多个类型一次性扩展interface A { a: string; } interface B { b: string; } interface Y extends A, B { y: string; }3. 联合与交叉的灵活性不同type在定义联合类型与交叉类型时更加灵活借助|与运算符可以轻松组合出复杂类型。而interface无法直接表示交叉类型只能通过别名间接表达联合类型type Department dep-x | dep-y; // 联合类型 type Person { name: string; age: number; }; type Employee { id: number; department: Department; }; type EmployeeInfo Person Employee; // 交叉类型接口可以出现在联合类型中但必须借助type别名完成interface A { x: x; } interface B { y: y; } type C A | B; // 接口的联合4. 选型结论综合仓库章节的对比可以归纳出实践建议当需要声明合并、面向对象式的extends继承、或编写可被其他声明扩充的类型时优先使用interface当需要定义联合类型、交叉类型、元组、映射类型等复杂类型表达式或希望创建基于已有类型的别名时优先使用type两者在描述普通对象结构时能力等价选择应依据上述场景差异而非个人偏好。六、结语与延伸阅读Interface 与 Type 是 TypeScript 类型系统最基础也最核心的两种构造工具前者以「声明」的方式描述对象结构并支持合并与继承后者以「别名」的方式覆盖从原始类型到联合/交叉/元组的全部组合能力。掌握二者的通用语法、基础类型注解与组合方式是深入 TypeScript 类型系统的第一步。本文基于仓库中以下文档与章节整理读者可继续深入本章原文俄语版website/src/content/docs/ru-ru/book/interface-and-type.md英文原版website/src/content/docs/book/interface-and-type.mdType 与 Interface 的差异对象类型联合类型 与 交叉类型扩展类型 与 可选属性类型注解 与 内置类型原语赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐TypeScript 中的 Interface 与 Type对象结构定义、类型别名与实战选型指南The Concise TypeScript Book 精读TypeScript 中的 Interface 与 Type对象结构定义、类型别名与实战选型指南The Concise TypeScript Book 精读文档教程The Concise TypeScript Book 实战指南interface 与 type 的语法体系与联合交叉类型详解The Concise TypeScript Book 实战指南interface 与 type 的语法体系与联合交叉类型详解 本篇技术指南围绕开源项目 Th文档教程The Concise TypeScript Book 精读Interface 与 Type 的完整定义语法与实战选型The Concise TypeScript Book 精读Interface 与 Type 的完整定义语法与实战选型 本篇技术指南以 The Concise文档教程上一篇Flower任务优先级调度监控确保关键业务优先执行的终极指南下一篇解决LayUI新版标签页中表单元素样式异常问题从现象到根源的深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
TypeScript 中的 Interface 与 Type：对象结构定义、联合/交叉类型与实战选型（The Concise TypeScript Book）
文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载本篇技术指南以开源仓库 typescript-book 中《The Concise TypeScript Book》第 49 章「Интерфейс и типInterface 与 Type」为核心系统讲解 TypeScript 中接口interface与类型别名type的通用语法、基础类型注解、对象类型定义以及联合类型Union与交叉类型Intersection的组合用法并结合仓库内differences-between-type-and-interface、object-types、extending-types等章节进一步梳理二者的关键差异与选型建议。读完本文你将能够准确书写对象结构类型、熟练组合联合/交叉类型并依据项目场景做出 interface 与 type 的正确取舍。一、Interface 与 Type 的通用语法在 TypeScript 中接口interface用于定义对象的结构它规定一个对象必须拥有哪些属性property与方法method并给出它们的名称与类型。定义接口的通用语法如下interface InterfaceName { property1: Type1; // ... method1(arg1: ArgType1, arg2: ArgType2): ReturnType; // ... }类型别名type alias同样可以描述对象结构其通用语法为type TypeName { property1: Type1; // ... method1(arg1: ArgType1, arg2: ArgType2): ReturnType; // ... };语法成分逐项解析语法片段含义interface InterfaceName/type TypeName定义接口/类型的名称property1: Type1;声明接口的属性及对应类型多个属性之间用分号分隔method1(arg1: ArgType1, arg2: ArgType2): ReturnType;声明接口的方法方法名 括号内的参数列表 返回类型多个方法同样以分号分隔两种语法的差别在于interface使用关键字直接声明一个命名接口而type采用赋值形式创建一个类型别名其右侧既可以是一个对象类型字面量也可以是任意复杂的类型表达式联合、交叉、元组等。这一点正是理解二者差异的起点。一个接口示例interface Person { name: string; age: number; greet(): void; }上面的Person接口要求任何作为Person使用的对象都必须具备name字符串、age数字两个属性以及一个不返回值的greet方法。一个类型示例type TypeName { property1: string; method1(arg1: string, arg2: string): string; };类型别名以同样的结构语法描述对象形状语义上与接口等价但type的适用范围更广。二、基础类型注解从原始类型到元组TypeScript 中的类型type一方面用于描述数据结构的形状另一方面用于在编译期强制进行类型检查。针对不同的使用场景存在多种常见的类型定义语法以下是几种最基础的写法let myNumber: number 123; // number 类型 let myBoolean: boolean true; // boolean 类型 let myArray: string[] [a, b]; // 字符串数组 let myTuple: [string, number] [a, 123]; // 元组number数值类型涵盖整数与浮点数boolean布尔类型取值为true或falsestring[]元素类型为string的数组也可写作Arraystring[string, number]元组tuple类型限定元素的个数与每个位置的类型——第一个元素必须是字符串第二个必须是数字。仓库中《内置类型原语》章节还系统列出了 TypeScript 的全部内置原语类型包括null表示值缺失、undefined表示尚未赋值或尚未定义、symbol唯一标识符常作为对象属性的键、bigint任意精度整数、any动态类型可持有任意类型的值并绕过类型检查、void表示无任何类型常用于无返回值函数的返回类型以及never表示永不发生的值常用于抛出异常或无限循环函数的返回类型。若需限定元组长度不可变更可使用as const将元组标记为固定长度只读元组见仓库《固定长度元组》章节const x [10, hello] as const; x.push(2); // 错误无法修改固定长度元组三、对象类型与接口直接标注与匿名对象对象类型描述对象的形状即属性的名称、类型以及该属性是否必需或可选。在 TypeScript 中有两种主要的对象类型定义方式其一使用interface定义对象形状指定属性的名称、类型与可选性interface User { name: string; age: number; email?: string; }email?: string中的问号?表示email为可选属性该属性可以省略详见仓库《可选属性》章节type X { a: number; b?: number; // 可选 }; // 可选属性可配合解构默认值使用 const x ({ a, b 100 }: X) a b;其二使用type类型别名定义对象形状。它除了描述对象还可以基于已有类型或多种类型的组合创建新的自定义类型包括联合类型、交叉类型及其他复杂类型type Point { x: number; y: number; };此外还可以匿名地定义对象类型即不为其命名直接在变量或函数参数的位置内联写出结构。例如仓库《对象类型》章节中的示例——对象字面量直接作为函数参数的类型标注const sum (x: { a: number; b: number }) x.a x.b; console.log(sum({ a: 5, b: 1 }));再如下面这种最常见的匿名对象标注方式const x: { name: string; age: number } { name: Simon, age: 7 };关于类型标注的位置仓库《类型注解》章节给出的实践准则是关注类型签名如函数参数与返回类型而不必标注函数体内的局部变量且对象字面量始终建议显式标注类型。四、联合类型与交叉类型组合与复用类型联合类型Union Type联合类型表示一个值可以是若干类型中的任意一种使用|符号连接每个候选类型type MyType string | number; // 联合类型 let myUnion: MyType hello; // 可以是字符串 myUnion 123; // 也可以是数字即string | number类型的变量可以安全地接收字符串或数字中的任意一个。仓库《联合类型》章节给出了最简洁的说明let x: string | number;之后x hello与x 123均合法。交叉类型Intersection Type交叉类型表示一个值同时拥有多个类型的所有属性使用符号连接每个类型。被连接的类型可以是type别名也可以是interfacetype TypeA { name: string }; type TypeB { age: number }; type CombinedType TypeA TypeB; // 交叉类型 let myCombined: CombinedType { name: John, age: 25 }; // 同时具备 name 与 age 两个属性依据仓库《交叉类型》章节的定义交叉类型X Y表示一个值具有X与Y的全部属性。它是构造「组合对象」最直接的手段常用于将基础实体与附加能力合并。五、从源码章节看 Interface 与 Type 的核心差异仓库专门设有《Type 与 Interface 的差异》章节系统对比了二者的四个关键差异可作为实战选型的依据。1. 声明合并Declaration Merginginterface支持声明合并可以多次定义同名接口TypeScript 会将它们合并为一个包含全部属性与方法的新接口而type不支持声明合并。interface A { x: string; } interface A { y: string; } const j: A { x: xx, y: yy, };同名接口A的两段声明被合并最终A同时拥有x与y。这在对既有类型进行补丁或扩展如补充第三方库缺失/错误的类型声明时非常有用。2. 扩展其他类型/接口的语法不同二者都可以扩展其他类型但语法截然不同interface使用extends关键字继承其他接口的属性和方法但不能扩展联合类型这类复杂类型interface A { x: string; y: number; } interface B extends A { z: string; } const car: B { x: x, y: 123, z: z, };type使用运算符将多个类型组合为一个新类型交叉interface A { x: string; y: number; } type B A { j: string; }; const c: B { x: x, y: 123, j: j, };仓库《扩展类型》章节进一步指出extends关键字只适用于接口和类type的扩展只能通过交叉实现并且可以用interface去扩展type反之则不行type A { a: string; }; interface B extends A { b: string; }同时接口支持从多个类型一次性扩展interface A { a: string; } interface B { b: string; } interface Y extends A, B { y: string; }3. 联合与交叉的灵活性不同type在定义联合类型与交叉类型时更加灵活借助|与运算符可以轻松组合出复杂类型。而interface无法直接表示交叉类型只能通过别名间接表达联合类型type Department dep-x | dep-y; // 联合类型 type Person { name: string; age: number; }; type Employee { id: number; department: Department; }; type EmployeeInfo Person Employee; // 交叉类型接口可以出现在联合类型中但必须借助type别名完成interface A { x: x; } interface B { y: y; } type C A | B; // 接口的联合4. 选型结论综合仓库章节的对比可以归纳出实践建议当需要声明合并、面向对象式的extends继承、或编写可被其他声明扩充的类型时优先使用interface当需要定义联合类型、交叉类型、元组、映射类型等复杂类型表达式或希望创建基于已有类型的别名时优先使用type两者在描述普通对象结构时能力等价选择应依据上述场景差异而非个人偏好。六、结语与延伸阅读Interface 与 Type 是 TypeScript 类型系统最基础也最核心的两种构造工具前者以「声明」的方式描述对象结构并支持合并与继承后者以「别名」的方式覆盖从原始类型到联合/交叉/元组的全部组合能力。掌握二者的通用语法、基础类型注解与组合方式是深入 TypeScript 类型系统的第一步。本文基于仓库中以下文档与章节整理读者可继续深入本章原文俄语版website/src/content/docs/ru-ru/book/interface-and-type.md英文原版website/src/content/docs/book/interface-and-type.mdType 与 Interface 的差异对象类型联合类型 与 交叉类型扩展类型 与 可选属性类型注解 与 内置类型原语赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐TypeScript 中的 Interface 与 Type对象结构定义、类型别名与实战选型指南The Concise TypeScript Book 精读TypeScript 中的 Interface 与 Type对象结构定义、类型别名与实战选型指南The Concise TypeScript Book 精读文档教程The Concise TypeScript Book 实战指南interface 与 type 的语法体系与联合交叉类型详解The Concise TypeScript Book 实战指南interface 与 type 的语法体系与联合交叉类型详解 本篇技术指南围绕开源项目 Th文档教程The Concise TypeScript Book 精读Interface 与 Type 的完整定义语法与实战选型The Concise TypeScript Book 精读Interface 与 Type 的完整定义语法与实战选型 本篇技术指南以 The Concise文档教程上一篇Flower任务优先级调度监控确保关键业务优先执行的终极指南下一篇解决LayUI新版标签页中表单元素样式异常问题从现象到根源的深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
