ts学习整理-interface

1、定义：在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。TypeScript 中的 类型接口 是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。在TS中使用 interface 接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束)

Interfaces 定义对象类型:

interface IPerson {
    name: string;
    age: number;
    gender: string;
    callback: (a: number) => number //此处定义约束了一个 函数方法
}

let user: IPerson = {
    name: '张三',
    age: 25,
    gender: "男",
    callback(a: number) { //定义函数方法
        console.log("这是一个函数");
        return 123 * 10
    },
};

//调用函数
console.log(user.callback(456)); //1230
一个接口 Person，接着定义了一个变量 user，它的类型是 Person。约束了 user 的形状必须和接口 Person 完全一致,不能比接口定义的多，也不能比接口定义的少，且类型也必须同步。

2、接口命名规则：

（1）在接口名称前面加上字母I，以指示类型是接口。

（2）不要试用下划线字符

3、可选属性/任意属性/联合类型/只读类型

可选属性：在非需要完全匹配的 属性 后面 加上 “?”,就可以

interface IPerson {
    readonly id:number; //只读类型
    name: string;
    age: number;
    gender?:string;//可选类型
　  [ArbitraryvalName: string]: string | number | boolean; //联合类型
    [ArbitraryvalName: string]: any //任意类型
}

任意属性：[ArbitraryvalName: string]: any 定义了 string 类型的属性，和任意类型的值。

interface IPerson {
    name: string;
    age: number;
    gender?: string;
    [hobby: string]: any
}

let user: IPerson = {
    name: '张三',
    age: 25,
    newproperty: "任意属性值"    
    //这里定义了，interface  中未定义的属性，因为在接口中，                         
    // 配置了任意属性，所以，我们在定义对象的时候，就可以自定义 属性了。
    //同时 接口中的 gender 属性我们可以不定义，因为 gender 为 “可选属性”
                                 
};

4、接口继承

概念：接口的很多属性是可以进行类型复用的，使用 extends 关键字实现接口继承,实现类型复用

interface IgoodsType {
    id: number
    name: string
}

interface IinfoType extends IgoodsType {
    age: number
}

let Obj: IinfoType = {
    id: 123,
    name: "李四",
    age: 25
}

5、Interfaces 定义数组（Array）类型:

interface Iarraytype {
    [index: number]: number   //定义任意属性，index 代表数组中的下标。属性值，约束了数组中的数据类型。以及返回值
}
let arr: Iarraytype = [1, 2, 3, 4, 5]  //关联数组类型

6、Interfaces 定义函数（function）类型:

interface Ifuntype {  //约束好函数的 规则
//(参数：类型,...):返回值
    (num: number, digit: number): number
}

let fn: Ifuntype = (a, b) => {  //关联函数类型
    return a + b
}
let c = fn(15, 20);
console.log(c);   //35