从0开始学习TypeScript-接口类型

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

今天主要学习Typscript中的接口部分，TypeScript设计的接口类型约束和检查，这个核心原则同后端一些静态语言相同，作用就是为这些类型命名和为代码或第三方代码定义契约。

我们来看看它是如何定义约束的，我们定义一个动物Animal的接口，里面有一个footer属性,我们现在需要一只小猫，我们声明一个函数叫CreateCat,它的作用就是利用面向对象的方式创建一只小猫，这时我们给它提供约束，参数必须使用Animal接口或者继承自Animal接口的派生类

interface Animal {
  footer: string;
}
​
function CreateCat(footer: Animal) {
  console.log(animal.footer);
}

1.可选属性

接口中的属性不是所有都是需要的，我们定义可选属性,例如表示接口中的footer不是必须的

interface Animal {
  footer?: string;
}

2.只读属性

利用readlony关键字，我们可以通过字面量的方式构造实例,但是赋值之后就不能再被改变

interface Animal {
  footer?: string;
}
let p1: Animal = { footer: "字符串" };
p1.footer ="改变字符串值"//报错
​

我们还有一个ReadonlyArray数组，初始化 之后也是不能被改变的,但是我们可以使用类型转换来进行赋值

let nums: ReadonlyArray<number> = [1,2,3,4];
nums[1] = 9;//报错
//类型转换
let transfor = nums as number[];

3.函数类型

在 Typescript中接口也可以描述函数类型,例如先定义一个接口，接口中有一个只有返回值和参数没有方法体的函数，然后复制给我们的变量

interface SearchFunc {
  (source: string, subString: string): boolean;
}
​
//定义一个接口类型的变量
let fun :SearchFunc;
//给变量赋值
fun = function(source: string, subString: string)
{
     let result = source.search(subString);
     return result > -1;   
}

4.可索引的类型

可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型，和函数类型描述差不多，我们看下面的例子

interface StringArray {
  [index: number]: string;
}
​
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

5.类类型

和C#接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种约束，我们可以在接口中描述一个方法，然后在类里实现它,接口只描述公共的部分

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}
​
class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}
​

6.接口继承类

接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口会继承到类的private和protected成员

class Control {
    private state: any;
}
​
interface SelectableControl extends Control {
    select(): void;
}