TypeScript定义接口(interface)案例教程

Kathy ·

更新时间:2024-11-10

· 125 次阅读

接口的作用：

接口，英文：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，typescript 会报错，即使 age 属性本身不是必须传的。

这就是额外属性检查。

当然，我们也可以使用类型断言绕开这些属性检查，上链接：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定义接口内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

interface TypeScript 接口教程

1024 个赞