在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
接口的作用:接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定。
举个例子: // 定义接口 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中的类型断言[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 的: 函数类型接口: 简单来说,函数类型的接口就是规定了 函数的参数类型以及函数的返回值类型。 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; } 可索引类型接口:可索引类型接口简单来说就是,我们可以规定 索引的类型 和 返回值的类型。
interface PersonArr { [index: number]: string } // 定义数组 let manArr: PersonArr = ['syw','syw1','syw2']; // 查询 manArr[0]; // 此时 0 作为索引是 number 类型,0 号元素返回的是 syw 是 string 类型 Typescript 中支持两种索引签名,其实就是索引类型,分别是:number 和 string。 并且,如果我们使用 number 类型的索引,那么定义的返回值类型 必须是 定义 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定义接口内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论