TypeScript接口interface教程：可选、只读、函数与索引类型

接口的核心作用

在编程语境中，接口（interface）主要提供一种约定机制。

TypeScript官方文档对此有明确定义：

TypeScript遵循的核心原则之一是对值结构进行类型检查，这被称为“鸭式辨型法”或“结构性子类型化”。

在TypeScript中，接口的作用是为这些类型命名，并为你的代码或第三方代码定义契约。

具体示例如下：


// 定义接口 Person
interface Person {
    name: string;
    age: number;
}

// 指定定义的变量 man 的类型为我们的 Person "类型" 【这么表达不是很准确，只是为了方便理解】
let man: Person;

// 此时，我们对 man 赋值时，man 就必须遵守我们定义的 Person 约束，即必须存在 number 类型的 age 字段 和 string 类型的 name 字段
man = { age: 10, name: 'syw' }
# 或者这样
function fun(women:Person){} // 参数 womem 也必须遵守 Person 约束

上述示例简要展示了接口的定义方式及其基本作用，接下来将介绍接口的其他高级用法。

定义接口可选属性

包含可选属性的接口与普通接口定义相似，区别在于可选属性名后需添加 ? 符号。


interface Person {
    name: string
    age?: number
}

可选属性的常见使用场景是处理不确定是否传递或存在的参数。

TypeScript官方文档指出可选参数的优势：

可选属性的好处包括：一是对可能存在的属性进行预定义；二是能在引用不存在的属性时捕获错误。

额外属性检查机制

简单来说，我们可以设置属性为可选，但不允许传递错误的属性。

以之前的 Person 接口为例，若使用时将 age 属性错误拼写为 aag，即使 age 非必填，TypeScript 仍会报错。

这一机制被称为额外属性检查。

当然，我们也可以使用类型断言来绕过这些属性检查，详见：TypeScript中的类型断言[as语法 | ＜＞语法]

定义接口只读属性

部分对象属性仅在创建时可修改，因此可在属性名前使用 readonly 关键字指定只读属性。


interface Person {
    readonly name: string;
    readonly age: number;
}
// 赋初始值
let man: Person = {name: 'syw', age: 10};

// 如果此时在对值进行修改，就会出错。
man.age = 20；// error！
// Cannot assign to 'age' because it is a read-only property.

只读属性的效果与 const 类似，但两者本质不同，此处仅作通俗理解。

在Typescript中是这么描述 readonly 和 const 的：

判断使用 readonly 还是 const 的最简单方法是看用途：若作为变量使用则用 const，若作为属性则使用 readonly。

函数类型接口

函数类型接口规定了函数的参数类型及返回值类型。


interface PersonFun {
    (name: string, age: number): boolean
}
// 定义函数，符合 PersonFun 约束
let manFun: PersonFun = (name: string, age: number) => {
    return age > 10;
}

注意事项：

函数参数类型不可更改，返回值也必须遵守约束。
函数参数名无需与接口中名称对应，只需保证对应参数位置的类型兼容即可。


// 这样也是符合要求的
let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

可索引类型接口

可索引类型接口用于规定索引的类型和返回值的类型。

例如：在数组中，可规定以 number 类型值作为索引，索引结果为 string 类型值，从而固定数组形式。


interface PersonArr {
    [index: number]: string
}
// 定义数组
let manArr: PersonArr = ['syw','syw1','syw2'];
// 查询
manArr[0]; // 此时 0 作为索引是 number 类型，0 号元素返回的是 syw 是 string 类型

TypeScript 支持两种索引签名，即索引类型：number 和 string。

若使用 number 类型索引，则定义的返回值类型必须是定义 string 类型索引返回值的子类型。

TypeScript 对此解释如下：

使用 number 索引时，JavaScript 会将其转换为 string 再索引对象。即用 100（number）索引等同于使用 "100"（string）索引，因此两者需保持一致。

初看此句可能难以表述，仔细研究后发现其实很简单：


// 比如我这个 PersonArr 有两个索引，一个是 index（number）类型，一个是 item（string） 类型，那么我在定义这个两个索引的返回值的时候，就必须严格遵守上面说的：
// 使用 number 类型的索引，那么定义的返回值类型 必须是 定义 string 类型索引返回值的子类型。

// 所以我下面定义的这个接口就会报错
interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
// 因为 index 返回值是 string 类型 ，很显然不是 item 返回值 number 类型的子类型
// 怎么写才对呢？最简单的方法，把 index 返回值的类型也改成 number 就好了。

到此这篇关于TypeScript定义接口(interface)案例教程的文章就介绍到这了,更多相关TypeScript定义接口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

TypeScript接口定义与高级用法详解

接口的核心作用

定义接口可选属性

额外属性检查机制

定义接口只读属性

可索引类型接口

实用工具推荐