这是我参与更文挑战的第6天，活动详情查看：更文挑战

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: 类型

人懒，不想配图，都是自己的博客内容（干货），望能帮到大家

公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西