五 typescript学习之路 —— ts的接口

项目开发中,我们会遇到这样的需求 。就是我们需要开发一个函数或者一个插件或者库等等,需要调用者调用时传入指定的参数,比如我们需要的是类型的或者对象类型的,再或者是对象类型的且里面的属性必须包含什么属性等,如果说我们自己的约定属于彼此之间的约定,那么接口就是ts为你的代码定义的强制契约 。
文章目录接口的继承接口对函数的约束接口的混和类型类可以实现接口
一般情况下的我们定义的约定
const printFullName = ({ firstName, lastNmae }) => return `${ firstName } ${ lastName }`printFullName({ firstName: '爱新觉罗', lastName: '小胖纸'}) // 输出 爱新觉罗 小胖纸
我们期望的是这样,但是呢?一句话怎么说来着,你永远不要去揣测用户的心里 。
可能他们调用的时候传的是这个
printFullName({ firstName: '爱新觉罗', lastName: 18})
这样传参是合法的,但是却不是我们想要的,而结果当然也是不可预期的 。
接口初探
那么接下来我们看接口是如何进行约束的
ts规定了使用声明一个接口
interface FullName {firstName: stringlastName: string}// 接着我们改造下上面的函数定义const printFullName = ({ firstName, lastNmae }: FullName ): string => return `${ firstName } ${ lastName }`
这样我们就给函数的参数进行了一层约束,约束规则如下
必须是一个对象对象必须包含和属性和的属性值必须是类型
// 我们试着调用下printFullName({ firstName: '爱新觉罗', lastName: '小胖纸'}) // success 爱新觉罗 小胖纸printFullName({ firstName: '爱新觉罗', lastName: 18}) // error lastname不能将number类型分配给string
这样我们就约束了调用者的传参,其结果也就符合预期了
可选属性
还是拿上面的例子举例,可选属性就是在对象的后面添加?
// 定义一个接口,firstName 必须有,lastName和age可有可无interface FullName {firstName: stringlastName?: stringage?: number}const printFullName = ({ firstName, lastName = '', age }: FullName): string => {return `${ firstName } ${ lastName } ${ age }`}printFullName({ firstName: '爱新觉罗' } // 爱新觉罗printFullName({ firstName: '爱新觉罗', age: 22 } // 爱新觉罗 22printFullName({ firstName: '爱新觉罗', lastName: '小胖纸', age: 22 } // 爱新觉罗 小胖纸 22
这样我们在传参时,就可以根据条件来进行对应传参
只读属性
顾名思义,只读属性规定了对象只能在初始化时对其进行赋值,一旦初始化完毕,就修改不了
// 定义一个接口,firstName interface FullName {firstName: stringreadonly lastName: string}const fullName: FullName = { firstName: '爱新觉罗', lastName: '小胖纸' }fullName.lastName // 小胖纸// 当我们尝试着修改时fullName.lastName = '大胖纸' // error lastName is read-only
同样的数组也是对象的一种,在重温下数组的定义
const arr: number[] = [1, 2, 3]// 或const arr: Array = [1, 2, 3]
因此对于数组而言也有只读属性

五  typescript学习之路 —— ts的接口

文章插图
const arr: ReadonlyArray = [1, 2, 3]arr[1] // 2// 当我们尝试着去修改值时arr[1] = 1 // error arr is read-only