文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

TypeScript怎么定义接口

2023-06-20 17:16

关注

这篇文章主要讲解了“TypeScript怎么定义接口”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript怎么定义接口”吧!

接口的作用:

接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定。

在Typescript中是这么描述的:

  • TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。

  • 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

举个例子:

// 定义接口 Personinterface 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中是这么描述可选参数的好处的:

  • 可选属性的好处之一是可以对可能存在的属性进行预定义,好处之二是可以捕获引用了不存在的属性时的错误。

额外属性检查:

说起来这一点,简单总结一下就是:我们可以设置属性是可选的,但是不能传错误的属性。

这就是额外属性检查。

当然,我们也可以使用 类型断言 绕开这些属性检查,上链接: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;}

注意:

  1. 函数参数类型不可更改,包括返回值也必须遵守约束。

  2. 函数参数名可以不用和接口中的名字对应,只要求对应参数位置的类型兼容。

// 这样也是符合要求的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 类型索引返回值的子类型。

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怎么定义接口”的内容了,经过本文的学习后,相信大家对TypeScript怎么定义接口这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯