前端框架（react+umi+dva+ant design pro ）攻克: 一、typescript接口(三）

接口

  一、接口在typescript中定义的本质是：

       定义好对象的属性及类的具体结构，即约束他们的类型检查，从而增加代码可拓展性和可维护性。

       简单总结就是：代码合规性的契约定义。

二、接口如何定义，即接口在各个场景是的应用举例：

（一）定义对象的外形，约定对象必须有哪些属性

（1）最常见的：

interface LabelledValue {

label: string;

}

（2）可选属性定义：可选属性名字定义的后面加一个?符号。

interface SquareConfig {

     color?: string;

    width?: number;

}

（3）只读属性定义：

interface Point {

readonly x: number;

readonly y: number;

}

（4）额外属性即索引签名定义

interface SquareConfig {

color?: string;

width?: number;

[propName: string]: any;

}

（二）对函数的参数及返回值采用接口来约定

声明：

interface SearchFunc {

(source: string, subString: string): boolean;

 

调用：

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string) {

let result = source.search(subString); return result > -1;

}

}

//对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配

（三）可索引类型的接口定义：

好好理解这句：ypeScript支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。 也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

好好理解这句：字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj["property"]两种形式都可以。

索引还可设置为只读：

（四）对类的定义通过接口定义来约束：即类实现接口implements关键字用法

// 接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

（五）继承接口：extends

      一个接口可以继承多个接口。

（六）混合类型：一个对象同时有函数，有属性，有额外属性等：

（七）接口继承类：当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。