TypeScript接口介绍
前言:
TS的核心原则之一就是对所具有的结构 进行类型检查。接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
最终被编译成JavaScript
代码后不包含接口以及类型约束的代码。
1.接口的定义
接口的作用于type
关键字类似,但是又不一样。type可以定义简单的数据类型,例如如下代码
type str = string
这种写法就不能应用在 接口 中,接口中只能写函数类型和类类型还有数组类型。
在TS中定义接口使用interface
关键字。
示例代码如下所示:
// 定义一个简单的接口 interface Person { name: string } // 定义 get 方法 function getPersonName(person: Person): void { console.log(person.name) } // 定义 set 方法 function setPersonName(person: Person, name: string): void { person.name = name } // 定义一个 person 对象 let person = { name: '一碗粥', } setPersonName(person, '一碗周') // 修改成功 getPersonName(person) // 一碗周
Person
接口就像是一个名字,它用来描述使用该接口中的要求,例如此接口中需要一个name
属性,且类型为string类型。
值得注意的是,类型检查并不会检查属性的顺序,只需要对应你的属性存在,且类型相同即可。
2.属性
2.1可选属性
如果接口中的某个属性是可选的,或者说仅仅在某个条件下存在,可以在属性名旁边加一个?号。示例代码如下:
;(function () { // 定义一个简单的接口 interface Person { name: string // 说明 age 是可选的 age?: number } // 定义一个 person 对象 let person = { name: '一碗周', age: 18, hobby: 'coding', } // 定义 get 方法 function getPersonName(person: Person): void { // console.log(person.age, person.hobby) // Property 'hobby' does not exist on type 'Person'. } })()
此时的sex
属性我们可写可不写,但是hobb
属性,由于没有在接口中定义,我们调用会抛出异常。
2.2只读属性
如果想让一个属性为一个只读属性,仅仅需要在属性前面添加readonly
即可。
示例代码如下:
;(function () { interface Person { // 将 name 设置为只读 readonly name: string } // 定义一个 person 对象 let person = { name: '一碗周', } // 定义 set 方法 function setPersonName(person: Person, name: string): void { person.name = name // Cannot assign to 'name' because it is a read-only property. } setPersonName(person, '一碗粥') })()
3.类类型
3.1继承接口
和类一样,接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。
接口继承使用extends关键字,示例代码如下:
// 定义两个接口 interface PersonName { name: string } interface PersonAge { age: number } // 定义一个 Person 接口继承于以上两个接口 多个接口使用 , 逗号分割 interface Person extends PersonName, PersonAge { hobby: string // 定义一个方法,返回值为 string say(): string } let person = { name: '一碗周', age: 18, hobby: 'coding', // 示例方法 say() { return '一碗周' }, } // 定义 get 方法 function getPersonName(person: Person): void { console.log(person.name, person.age, person.hobby) } getPersonName(person) // 一碗周 18 coding
继承多个接口中间使用,逗号分割。
4.函数类型
在TS中接口还可以对函数类型的接口进行描述。
函数类型接口的定义就像是一个只有参数列表和返回值类型的函数定义,参数列表中每个参数都需要名字和类型 。
示例代码如下所示:
interface MyAdd { (x: number, y: number): number }
定义完成之后我们可以像使用普通接口一样使用这个函数接口。
示例代码如下所示:
let myAdd: MyAdd = (x: number, y: number): number => { return x + y }
上面的代码等同于如下函数定义的代码:
let myAdd: (x: number, y: number) => number = ( x: number, y: number ): number => { return x + y }
到此这篇关于TypeScript
接口介绍的文章就介绍到这了,更多相关TypeScript接口 内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7035979767941693476
相关文章
- 这篇文章主要介绍了c# 三种方法调用WebService接口的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-07
- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要介绍了C#简单了解接口(Interface)使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了SpringBoot接口接收json参数解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-19
- 这篇文章主要介绍了C# Rx的主要接口深入理解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Feign接口方法返回值设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-08
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了使用TS来编写express服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了vue设置全局访问接口API地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
- 在日常开发中,总会接触到各种接口,前后端数据传输接口,第三方业务平台接口,下面这篇文章主要给大家介绍了关于如何设计一个安全的API接口的相关资料,需要的朋友可以参考下...2021-08-12
- php怎么写api接口?本文介绍了php写api接口的实例代码,有兴趣的同学可以参考一下。 http://localhost/openUser.php?act=get_user_list&type=json在这里openUser.php...2017-07-06
- 这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-29
- 这篇文章主要介绍了vue配置多代理服务接口地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-08
- 这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
- 下面通过四步给大家介绍了c#处理和对接http接口请求的方法,分步骤介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2020-06-25
- 这篇文章主要介绍了Java接口DAO模式代码原理及应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-03
- 这篇文章主要介绍了C#实现两接口中同名方法,涉及C#接口与方法的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍...2021-09-15