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，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' becau 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;
}
注意：
1. 函数参数类型不可更改，包括返回值也必须遵守约束。
2. 函数参数名可以不⽤和接⼝中的名字对应，只要求对应参数位置的类型兼容。
// 这样也是符合要求的
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定义接⼝内容请搜索以前的⽂章或继续浏览
下⾯的相关⽂章希望⼤家以后多多⽀持！
