TypeScript学习笔记 -- （三、接口基本介绍）

前言

• TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加 静态类型 定义构建而成，是 JavaScript 的超集。TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统。
• TypeScript 现在已经红遍大江南北，很多 第三方库 已经用TypeScript作为底层，包括我们前端所熟知的大型框架Vue3.0也是已经用TypeScript进行重构。
• 优点：强大的IDE支持（类型检查、语法提示、重构提高开发效率和质量）

介绍

TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

😺接口初探

function print(labelledObj: { label: string }) {
    console.log(labelledObj.label); 
};
let myObj = { size: 10, label: "labelValue" };
print(myObj);

上面例子中，类型检查器会查看print的调用。 print有一个参数，并要求这个对象参数有一个名为label类型为string的属性。

注意：在我们平时开发中，我们传入的对象参数可能会包含更多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。 然而，有些时候TypeScript却并不会这么宽松（我们这里埋下个小伏笔😃）。

interface interfaceName { 
    label: string; 
} 
function print(labelledObj: interfaceName) {
    console.log(labelledObj.label);
} 
let myObj = {size: 10, label: ""}; 
printLabel(myObj);

interfaceName 接口就好比一个名字，用来描述对应的要求。 它代表了有一个 label属性且类型为string的对象。只要传入的对象满足接口提到的必要条件，那么它就是被允许的（）。

注意：类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

😺可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 所以此时可选属性就出现了，即给函数传入的参数对象中只有部分属性赋值了。

interface optionalAttribute {
    width?: string;
    height?: number; 
}

function box(config: optionalAttribute) : {width:string,shape:string}{
    let content = { width: "",shape: "" };
    if (config.width){
        content.width = config.width;
    } 
    if (config.height) {
        content.height = config.height;
    } 
    return content;
}
let mybox = box({ width: "100px" });

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。

• 可选属性的好处一：可以对可能存在的属性进行预定义。
• 可选属性的好处二：是可以捕获引用了不存在的属性时的错误。 比如，我们故意将 box函数里的color属性名拼错，就会得到一个错误提示。

错误代码演示（假如我们编写错误的一个单词）：

interface optionalAttribute {
    width?: string;
    height?: number; 
}

function box(config: optionalAttribute) : {width:string,shape:string}{
    let content = { width: "",shape: "" };
    if (config.width){
        content.width = config.widthss;   //属性“widthss”在类型“optionalAttribute”上不存在。你是否指的是“color”? 
    } 
    if (config.height) {
        content.height = config.height;
    } 
    return content;
}
let mybox = box({ width: "100px" });

上面IDE已经会给予我们错误提示，这也是我们TypeScript强大之处，得到众多IDE的语法支持😄，此时的我们在编写代码阶段就捕获了错误，而不是等到编译阶段。

😺只读属性

一些对象属性只能在对象刚创建的时候修改其值。以后只能是读取的状态，这时候你可以在属性名前用 readonly 来指定只读属性:

interface Person {
    readonly name: string; 
    readonly age: number;
}

你可以通过赋值一个对象字面量来构造一个Person。 赋值后， name 和 age再也不能被改变了。

let p: Person = { name: "zs", age: 18 }; 
p1.name = "ls";   // error!

TypeScript具有 ReadonlyArray<T> 类型，它与 Array<T> 相似，原因就是把数据所有可以改变的方法全部去掉，比如：push pop之类的，因此可以确保数组创建后再也不能被修改

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error! 
ro.push(5); // error! 
ro.length = 100; // error! 
a = ro; // error!

最后一行可以看到就算把整个 ReadonlyArray 赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写（用断言就是代表我已经非常确定他的类型了，告诉TypeScript不要理我😄）：

a = ro as number[];

readonly vs const

那我们在实际开中该用哪个呢？

做为变量使用的话用 const，若做为属性则使用readonly

😺 额外的属性检查

我们在刚开始的第一个例子里使用了接口，TypeScript让我们传入 { size: number; label: string; }到仅期望得到{ label: string; }的函数里。 我们已经学过了可选属性，并且知道他们在“option bags”模式里很有用。

然而，天真地将这两者结合的话就会像在JavaScript里那样搬起石头砸自己的脚。 比如，拿 interfaceName例子来说：

interface optionalAttribute {
    width?: string;
    height?: number; 
}

function box(config: optionalAttribute) : {width:string,shape:string}{
    // ...
}
let mybox = box({ width: "100px",heightss: "100px"});

注意传入optionalAttribute 的参数拼写为*height * 而不是heightss。 在JavaScript里，这会默默地失败。

你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。

然而，TypeScript会认为这段代码可能存在bug。 对象字面量会被特殊对待而且会经过 额外属性检查。 如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

// error: 'heightss' not expected in type 'optionalAttribute'
let mybox = box({ width: "100px",heights: "100px"});

绕开这些检查非常简单。 最简便的方法是使用类型断言：

let mybox = box({ width: "100px",heights: "100px"} as optionalAttribute);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。通俗一点来讲，你所定义的接口属性比传入的对象少，传入对象可能还包含其他属性。 如果 optionalAttribute带有上面定义的类型的width和height属性，并且 还会 带有任意数量的其它属性，那么我们可以这样定义它：

interface optionalAttribute {
    width?: string;
    height?: number;
    [propName:string]: any;
}

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量： 因为 obj 不会经过额外属性检查，所以编译器不会报错。这里就解释了我们前面例子中埋下的那个小伏笔了。

let obj = { width: "100px",heights: "100px" };
let mybox = box(obj);

像上面一样的简单代码里，你可能不应该去绕开这些检查。 对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大部额外属性检查错误是真正的bug。 就是说你遇到了额外类型检查出的错误，比如选择包，你应该去审查一下你的类型声明。 在这里，如果支持传入 color或heights属性到createSquare，你应该修改 optionalAttribute 定义来体现出这一点。

😺 函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc {
    (source: string, subString: string): boolean;
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下面展示如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string):boolean {
    let result = source.search(subString);
    if (result == -1) { 
        return false; 
    } else { 
        return true; 
    } 
}

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 比如，我们使用下面的代码重写上面的例子：

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
    if (result == -1) {
        return false;
    } else {
        return true;
    }
}

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。 如果你不想指定类型，TypeScript的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量。 函数的返回值类型是通过其返回值推断出来的（此例是 false 和 true）。 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

😺 可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如 a[10] 或ageMap["daniel"]。 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。 让我们看一个例子：

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob","Fred"];

let myStr: string = myArray[0];

上面例子里，我们定义了 StringArray 接口，它具有索引签名。 这个索引签名表示了当用 number去索引 StringArray 时会得到 string 类型的返回值。

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

数字索引的返回值必须是字符串索引返回值类型的子类型可以这样子这样去理解：number索引 是 string索引 的一种特殊情况。所以number索引的返回值也必须是基于string索引类型的返回值的。所以数字索引的返回值必须是字符串索引返回值类型的型。上面也已经描述了，number索引 最后是要转换成 string去索引对象的。

说到这里可能有一点点抽象化了，下面用一个简单的例子去介绍一下吧：

class 动物 {
    name:string;
}

class 🐈 extends 动物 {
    breed:string;
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!因为数值最终要转换成字符串
interface NotOkay {
    [x: number]: 动物;
    [x: string]: 🐈;
}

字符串索引签名能够很好的描述 dictionary 模式，并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property 和 obj["property"] 两种形式都可以。 下面的例子里， name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

interface NumberDictionary {
    [index: string]: number;
    length: number;        // 可以，length是number类型
    // name: string;       // 错误，`name`的类型不是索引类型的子类型
}

最后，你可以将索引签名设置为 只读 ，这样就防止了给索引赋值：

interface ReadonLyStringArray {
    readonly [index: number]: string;
}
let myReadArray: ReadonLyStringArray = ["Alice", "Bob"];
myReadArray[2] = "Mallory";

你不能设置myArray[2]，因为索引签名是只读的。

😺 类类型

这部分我们先暂时跳过，等学完类回来再进行补充😜

😺 继承接口（拓展接口）

和类一样，接口也可以相互扩展。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface Animal {
    name:string;
}

interface Dog extends Animal {
    age: number;
}

let square = <Animal> {};
square.name = "二狗子";
square.age = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Animal {
    name:string;
}

interface Dog {
    age: number;
}

interface Square extends Animal, Dog {
    type: string;
}
let squares = <Square>{};
square.name = "二狗子";
square.age = 10;
square.type = "大型犬";

😺 混合类型

先前我们提过，接口能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。 一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

interface Counter {
    (start:number):string;
    interval: number;
    reset(): void;
}

function getCounter():Counter {
    let counter =  <Counter> function (start:number) {};
    counter.interval = 1234;
    counter.reset = function () {};
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

在使用JavaScript第三方库的时候，你可能需要像上面那样去完整地定义类型。

😺 接口继承类

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

当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。 这个子类除了继承至基类外与基类没有任何关系。 例：

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

class Button extends Control implements SelectableControl {
    select() {};
}

class TextBox extends Control {
    select() {};
}

// 错误：“Image”类型缺少“state”属性。

class Image implements SelectableControl {
    select() {};
}

class Location {
    
}

在上面的例子里， SelectableControl 包含了 Control 的所有成员，包括私有成员 state 。 因为 state 是私有成员，所以只能够是 Control 的子类们才能实现 SelectableControl 接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。

在 Control 类内部，是允许通过 SelectableControl 的实例来访问私有成员 state 的。 实际上， SelectableControl 接口和拥有 select 方法的 Control 类是一样的。 Button 和 TextBox 类是SelectableControl 的子类（因为它们都继承自 Control 并有 select 方法），但 Image 和 Location 类并不是这样的。

😺 总结：

• 首先非常感谢掘金的各位小伙伴的阅读，本人在掘金开启自己的学习记录分享😄（这也是我在掘金的第一篇博客）。
• 上文如果描述有错误的，欢迎指正哦。也欢迎各位小伙伴一起交流学习，分享工作经验😃。
• 本文是依照TypeScript官网 + 自己的语言描述结合写出来的。希望对各位刚开始学TypeScript有帮助哦 🥰！