Typescript 文档地址:Interface
Duck Typing 概念:
如果某个东西长得像鸭子,像鸭子一样游泳,像鸭子一样嘎嘎叫,那它就可以被看成是一只鸭子。
概念:可以用来约束一个函数,对象,以及类的结构和类型
// 我们定义了一个接口 Person interface Person { name: string; age: number; } // 接着定义了一个变量 viking,它的类型是 Person。这样,我们就约束了 viking 的形状必须和接口 Person 一致。 let viking: Person ={ name: 'viking', age: 20 } //有时我们希望不要完全匹配一个形状,那么可以用可选属性: interface Person { name: string; age?: number; } let viking: Person = { name: 'Viking' } //接下来还有只读属性,有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性 interface Person { readonly id: number; name: string; age?: number; } viking.id = 9527 复制代码
1. 对象类型的接口
interface arrList { id: number name: string } interface arr { data: arrList[] } function getArrayList(data: arr) { data.data.forEach(item => { console.log('id=', item.id, 'name=', item.name) }) } //允许传入的list有除了接口定义的其他值,但接口中规定的值必须要有 const arr = { data: [{ id: 1, name: 'xiaosheng', age: 26 }] } /*若直接传人对象内容(对象字面量),ts会对其余的值进行类型检查 解决方法 1:将内容赋值给一个变量 2.添加类型断言 as+对象类型 3.给接口添加[x:string]:any */ getArrayId({ data: [{ id: 1, name: 'xiaosheng', age: 26 }] } as arr) 复制代码
2. 函数类型的接口
// 两种定义方式 // 第一种 interface one { ( x: number, y: number ): number } // 第二种 //type two = ( x: number, y: number) => number const two: one = (a, b) => { return a + b } console.log(two(1, 2)) 复制代码
3. 混合类型的接口(一个接口既可以定义一个函数,也可以定义一个对象)
//混合类型接口 interface MixItf { ():void; msg:string; dosomething():void } function getMix(){ let lib:MixItf = (() => {}) as MixItf; lib.msg = 'rose'; lib.dosomething = () => {} return lib; } let getMix1 = getMix() console.log(getMix1.msg) //rose 复制代码
个人总结:interface就是约束了一种整体类型,让后面的函数等根据对应的类型去操作
只读属性 readonly xx: 类型