TS中的接口（Interface）概念

最新推荐文章于 2025-06-04 16:21:24 发布

辣椒天堂

最新推荐文章于 2025-06-04 16:21:24 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： TS 文章标签： typescript 接口

本文链接：https://blog.csdn.net/Paper_Heaven/article/details/118526775

TS 专栏收录该内容

2 篇文章

订阅专栏

接口在TypeScript中提供了一个描述对象形状的方式，允许定义可选属性、只读属性、函数类型和索引签名。可选属性通过`?:`标记，只读属性使用`readonly`修饰。此外，接口还能描述函数的参数和返回值类型，以及对象的索引操作和其返回类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口的概念

提供一个可以继承的，其他变量可以选择使用的范式。

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

LabelledValue接口就好比一个名字，用来描述上面例子里的要求。它代表了有一个 label属性且类型为string的对象。需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

另外接口中的所有类型不都是必须的，可以选择 ?:表示可以省略，但只能在最后出现。

2.key,value 中，可以让[praname:string] :any

表示

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly来指定只读属性:

interface Point {
    readonly x: number;
    readonly y: number;
}

只读属性readonly 与 const 的区别

用来作为变量的时候使用const ，readonly用来作为属性

函数类型

接口中的属性类型当然可以包括函数类型，距离如下

interface functionSearch{
  (source:string,substring:string):boolean
}
let seach:functionSearch;
seach = function(sub:string){
    if(sub.length>5) return true;
    else return false;
}

函数类型的参数名并不需要匹配（形参）

索引签名

概念：索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

举例，定义了StringArray接口，它具有索引签名。这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。