TypeScript接口使用指南：定义、类型与继承
本文详细介绍TypeScript中接口的定义与使用。涵盖属性接口、可选接口、函数类型接口、可索引接口及类类型接口的具体语法与约束规则，并讲解接口通过extends关键字实现单继承与多继承的方法，帮助开发者规范代码结构。
1 概述
接口用于定义行为与动作的规范，在程序设计中起到限制和约束的作用。它规定了一批类必须提供的方法，而不关心类的内部状态或方法的具体实现细节，只要类提供了接口规定的方法，即可满足实际需求。
接口使用interface关键字来进行定义。
2 接口类别
2.1 属性接口
属性接口主要用于对传入的对象进行类型约束。
interface 接口名 { 属性1: 类型; 属性2: 类型; }
示例代码：
interface IPeople {
name: string;
age: number;
}
// 为函数的参数使用接口
function people(person: IPeople) {
console.log("姓名：", person.name);
console.log("年龄：", person.age);
}
people({ name: "橘猫吃不胖", age: 2 }); // 姓名： 橘猫吃不胖 年龄： 2
people("123"); // 报错，参数类型与接口内容不符合
people({ name: "橘猫吃不胖" }); // 报错，参数缺少age
people({ name: "橘猫吃不胖", age: 2, sex: "女" }); // 报错，参数增加了sex2.2 可选接口
在接口的属性名后添加“?”符号，表示该属性为可选，传递对象时可以不包含此属性。
interface 接口名 { 属性1?: 类型; 属性2?: 类型; }
示例代码：
interface IPeople {
name: string;
age?: number; // 表示age是可选属性，有无都可以
}
// 为函数的参数使用接口
function people(person: IPeople) {
console.log("姓名：", person.name);
console.log("年龄：", person.age);
}
people({ name: "橘猫吃不胖", age: 2 }); // 姓名： 橘猫吃不胖 年龄： 2
people({ name: "橘猫吃不胖" }); // 姓名： 橘猫吃不胖 年龄： undefined
people({ name: "橘猫吃不胖", age: 2, sex: "女" }); // 报错，属性增加了sex2.3 函数类型接口
函数类型接口用于约束方法的参数类型及返回值类型。
interface 接口名 { (参数1: 类型, 参数2: 类型): 类型; }
示例代码：
interface Obj { // 定义接口Obj
(key: string, value: number): string;
}
var myFun: Obj = function (key: string, value: number): string {
return key + "：" + value;
}
console.log(myFun("橘猫吃不胖", 2)); // 橘猫吃不胖：22.4 可索引接口
可索引接口主要用于约束数组和对象的结构（实际开发中较少使用）。
interface 接口名 { [索引: 类型]: 类型; }
示例代码：对数组的约束
// 对数组的约束
interface Arr {
// 字符串类型的数组，数组索引为string类型
[index: number]: string;
}
var arr1: Arr = ["1", "2", "3"]; // 格式正确
var arr2: Arr = [1, 2, 3]; // 报错示例代码：对对象的约束
// 对对象的约束
interface Obj {
// 索引是字符串型
[index: string]: string;
}
var obj1: Obj = { "张三": "zhangsan", "李四": "lisi" }; // 格式正确
var obj2: Obj = { "张三": 12, "李四": 13 }; // 报错，值不是字符串型
var obj3: Obj = []; // 报错，索引是数字类型2.5 类类型接口
类类型接口用于约束类的属性和方法，需使用implements关键字将接口应用于类。类中必须实现接口定义的所有属性和方法，否则编译报错；此外，类还可以定义接口未规定的额外方法。
interface 接口名 { 属性: 类型; 方法: 类型; }
示例代码：
interface IAnimal {
name: string; // 定义name属性
eat(): void; // 定义eat方法
}
class Dog implements IAnimal {
name: string;
constructor(name: string) {
this.name = name;
}
eat(): void { // 实现eat方法
console.log("吃骨头");
}
}如果不实现eat方法，代码会报错：
如果多增添一个sleep方法，代码不会报错：
3 接口继承
接口继承允许接口通过其他接口进行扩展，TypeScript 支持接口继承多个接口。继承操作使用关键字extends。
1 单接口继承语法格式
interface 子接口 extends 父接口 { // 具体实现 }
示例代码：
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
var s = <Square>{}; // 使用接口
s.color = "red";
s.sideLength = 30;
console.log(s); // { color: 'red', sideLength: 30 }
2 多接口继承语法格式
interface 子接口 extends 父接口1, 父接口2... { // 具体实现 }
示例代码：
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
let s1 = <Square>{};
s1.color = "red";
s1.penWidth = 20;
s1.sideLength = 2;
console.log(s1); // { color: 'red', penWidth: 20, sideLength: 2 }
到此这篇关于TypeScript接口使用介绍的文章就介绍到这了,更多相关TypeScript接口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object：数组类型检测误区解析
2026-11-04 19:50:47
