【前端48_TypeScript】接口、高级类型、interface 与 type 的区别、类型推导、类型断言

---

TypeScript

接口 interface

用来约束对象的结构

基本使用

简单的使用方法如下

可选属性

可选属性的声明，在变量后面用 ? 声明

只读属性

如果想定义一个只读的变量，应该用 readonly 去声明

可变 / 任意属性：对象属性的二次扩展

希望对对象属性进行扩展的，因为我们也不知道对象以后会添加什么属性，

任意属性如下图所示，用 [] 声明，注意：这里的 key 只是一个临时变量

注意：索引签名参数类型必须为 string 或 number 之一，但两者可同时出现，也就是下面这个意思：

注意：当同时存在数字类型索引和字符串类型索引的时候，数字类型的值类型必须是字符串类型的值类型或子类型

interface Point1 {
  [prop1: string]: string;
  [prop2: number]: number; // 错误
}
interface Point2 {
  [prop1: string]: Object;
  [prop2: number]: Date; // 正确
}

再来一个例子：

描述函数

如果想写几个相同的函数

function fn1(x: number, y: number): number {
  return x + y;
}
function fn2(x: number, y: number): number {
  return x + y;
}

那么可以通过接口来描述函数

// // 使用接口来描述函数
interface MyFunc {
  (x: number, y: number): number;
}
// 根据描述来声明新的函数
let fn3: MyFunc = function (a: number, b: number): number {
  return a + b;
};

再举一个例子

// 定义函数
interface MyFunc {
  (x: number, y: number): number;
}

// todu 形参传递一个回调函数，类型是 MyFunc
function todo(callback: MyFunc) {
  let v = callback(1, 2);
}

// 使用
todo(function (a: number, b: number): number {
  return a + b;
});

接着举例子

接口合并

此情况适用于定义了相同名的接口，代码处理的逻辑如下。

---

高级类型

联合类型

交叉类型

定义两个接口，o1 和 o2 ，最后通过 & 来合并两个接口为一个新的接口

这里的 assign 报红是因为 API 不会转换

TypeScript 在编译过程中只会转换语法（比如扩展运算符，箭头函数等语法进行转换，对于 API 是不会进行转换的（也没必要转换，而是引入一些扩展库进行处理的），如果我们的代码中使用了 target 中没有的 API ，则需要手动进行引入，默认情况下 TypeScript 会根据 target 载入核心的类型库

target 为 es5 时: ["dom", "es5", "scripthost"]
target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]

如果代码中使用了这些默认载入库以外的代码，则可以通过 lib 选项来进行设置

http://www.typescriptlang.org/docs/handbook/compiler-options.html

自变量类型

类型别名

有的时候类型标注比较复杂，这个时候我们可以类型标注起一个相对简单的名字

使用类型别名定义函数类型

interface 与 type 的区别

interface

• 只能描述 object/class/function 的类型
• 同名 interface 自动合并，利于扩展

type

• 不能重名
• 能描述所有数据

---

类型推导

每次都显式标注类型会比较麻烦，TypeScript 提供了一种更加方便的特性：类型推导。TypeScript 编译器会根据当前上下文自动的推导出对应的类型标注，这个过程发生在：

• 初始化变量
• 设置函数默认参数值
• 返回函数值

// 自动推断 x 为 number
let x = 1;
// 不能将类型“"a"”分配给类型“number”
x = "a";

// 函数参数类型、函数返回值会根据对应的默认值和返回值进行自动推断
function fn(a = 1) {
  return a * a;
}

类型断言

有的时候，我们可能标注一个更加精确的类型（缩小类型标注范围）

img 的类型为 Element，而 Element 类型其实只是元素类型的通用类型，如果我们去访问 src 这个属性是有问题的，我们需要把它的类型标注得更为精确：HTMLImageElement 类型，这个时候，我们就可以使用类型断言，它类似于一种 类型转换：

或者

注意：断言只是一种预判，并不会数据本身产生实际的作用，即：类似转换，但并非真的转换了