类型检查机制

类型推断

类型检查机制包含： 类型推断 类型兼容性 类型保护

不需要指定变量类型或函数的返回值类型，ts 可自动推断出类型
类型推断包括： 基础类型推断 最佳通用类型推断 上下文类型推断

// 基础类型推断
// 最佳通用类型推断
let a = 1;
let b = [1];
let b1 = [1, null];
let c = (x = 1) => {};
let c1 = (x = 1) => x + 1;
// 上下文推断
// window.onkeydown = (event) => {  // KeyboardEvent
//     console.log(event.button);
// };

类型断言

interface Foo {
    bar: number;
}
let foo = {} as Foo;
foo.bar = 1;

注意： 类型断言可以将某一变量特指为某种类型，但并不会产生接口约束作用，如下举例

interface Foo {
    bar: number;
}
let foo = {} as Foo;
// foo.bar = 1    不进行赋值

foo 被指定为 Foo 接口类型，但真实的 foo 是一个空对象，没有 foo.bar =1相当于没有 bar 属性，所以此时的接口并不能起到约束作用。 解决： 直接在声明的时将对象指定为接口类型，而不使用类型断言

{
  interface Foo {
    bar: number;
  }
  let foo: Foo = {};
}
{
  interface Foo {
    bar: number;
  }
  // let foo = {} as Foo;
  // foo.bar = 1;
  let foo: Foo = {
    bar: 1,
  };
}

各种类型之间的兼容性

tsconfig.json => “strictNullChecks”: false,（个人不推荐）

/**
 * X 兼容 Y: X (目标类型) = Y (源类型)
 */
let s: string = "a";
s = null;

接口兼容性

接口类型相当于对变量属性的约束，必须全部满足才可以兼容赋值

// 接口兼容性
interface x {
    a: any;
    b: any;
}
interface Y {
    a: any;
    b: any;
    c: any;
}
let x: X = { a: 1, b: 2 };
let y: Y = { a: a, b: 2, c: 3 };
// 将变量y赋值给变量x, 测试接口X是否兼容接口Y
x = y; // 源类型Y具备目标类型X的全部必要属性
// 将变量x赋值给变量y, 测试接口Y是否兼容接口X
y = x; // 源类型X不具备目标类型Y的全部必要属性(不含c属性)

函数的兼容性

目标函数能够兼容源函数，需同时满足以下三个条件： 参数的个数（目标函数的参数个数一定要多于源函数的参数个数） 参数的类型（参数类型必须匹配） 返回值的类型（标函数的返回值类型 与 原函数的返回值类型 必须相同或为其子类型）

// 函数兼容性
type Handler = (a: number, b: number) => void;
function hof(hadler: Handler) {
    return hadler;
}

函数兼容性的影响因素

参数个数

let hadler1 = (a: number) => {}; // 少参数
hof(hadler1);
let hadler2 = (a: number, b: number, c: number) => {}; // 多参数
hof(hadler2);
// 当参数不固定时,固定参数与可选参数,剩余参数的兼容性
{
    // 可选参数和剩余参数
    let a = (p1: number, p2: number) => {};
    let b = (p1?: number, p2?: number) => {};
    let c = (...args: number[]) => {};
    // tsconfig.json -> "strictFunctionTypes": false,
    a = b; // 固定参数可以兼容可选参数
    a = c; // 固定参数可以兼容剩余参数
    // tsconfig.json ("strictFunctionTypes": false可兼容)
    // b = c; // 可选参数不兼容固定参数
    // b = a; // 可选参数不兼容剩余参数
    c = a; // 剩余参数不兼容固定参数
    c = b; // 可选参数不兼容剩余参数
}

参数类型

基础类型

// 函数兼容性
type Handler = (a: number, b: number) => void;
function hof(hadler: Handler) {
    return hadler;
}
let hadler3 = (a: number) => {};
hof(hadler3);
// let hadler3 = (a: string) => { }
// hof(hadler3)

对象类型

interface Point3D {
    x: number;
    y: number;
    z: number;
}
interface Point2D {
    x: number;
    y: number;
}
let p2d = (ponit: Point2D) => {};
let p3d = (ponit: Point3D) => {};
// tsconfig.json ("strictFunctionTypes": false可兼容)
p2d = p3d // Point2D 不兼容 Point3D
p3d = p2d; // Point3D 兼容 Point2D

返回值类型

let f1 = () => ({ name: "Alice" });
let g = () => ({ name: "Alice", location: "Beijing" });
// 成员少的兼容成员多的
f1 = g;
g = f1;

小技巧： 返回值类型，和接口类似相当于是对函数的一种约束，所以必须在满足要求的前提先才可以兼容 即参数可以多了我不用，但绝对不可以少

函数重载对函数兼容性的影响

// 函数定义-重载列表
function overload(a: number, b: number): number;
function overload(a: number, b: number): string;
// 函数实现
// 兼容: 目标函数参数个数 > 源函数参数个数
function overload(a: any, b: any): any {}
// 不兼容: 目标函数参数个数 < 源函数参数个数
// function overload(a: any, b: any, c: any): any {}
// 不兼容: 删除返回值
// function overload(a: any, b: any) {}

枚举类型的兼容性

// 枚举兼容性
enum Fruit {
    Apple,
    Banana,
}
enum Color {
    Red,
    Yellow,
}
let fruit: Fruit.Apple = 1;
let no: number = Fruit.Apple;
// 不同枚举之间不兼容
// let color: Color.Red = Fruit.Apple;

类的兼容性

// 类的兼容性
// 静态成员和构造函数不参与类的兼容性比较
class A {
    constructor(p: number, q: number) {} // 构造函数
    id: number = 1;
    private name: string = ""; // 私有成员
}
class B {
    static s: number = 1; // 静态成员
    constructor(p: number) {} // 构造函数
    id: number = 2;
    private name: string = ""; // 私有成员
}
let aa = new A(1, 2);
let bb = new B(1);
// 类中包含私有成员，两个类不兼容
// aa = bb;
// bb = aa;
// 但父类和子类之间兼容
class C1 extends A {} // 创建子类
let cc = new C1(1, 2);
aa = cc; // 父类兼容子类
cc = aa; // 子类兼容父类

泛型的兼容性

// 当类型参数T未被成员使用是，不会影响泛型兼容性
interface Empty<T> {}
let obj1: Empty<number> = {};
let obj2: Empty<string> = {};
obj1 = obj2;
// 当类型参数T被成员使用时，才会影响泛型兼容性
interface Empty1<T> {
    attr: T;
}
let obj3: Empty1<number> = { attr: 1 };
let obj4: Empty1<string> = { attr: "1" };
// obj3 = obj4;
// 泛型函数的兼容性
// 定义相同的两个泛型函数,如果未指定具体类型,则可相互兼容
let t1 = <T>(x: T): T => {
    console.log("x");
    return x;
};
let t2 = <U>(y: U): U => {
    console.log("y");
    return y;
};
t1 = t2; // 未指定类型的两个定义相同的泛型函数，可相互兼容

结构之间兼容：成员少的兼容成员多的 函数之间兼容：参数多的兼容参数少的

类型保护机制

enum Type {
    Strong,
    Week,
}
class Java {
    helloJava() {
        console.log("Hello Java");
    }
    java: any; // 新增java属性
}
class JavaScript {
    helloJavaScript() {
        console.log("Hello JavaScript");
    }
    javascript: any; // 新增javascript属性
}
function getLanguage(type: Type) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    return lang;
}
getLanguage(Type.Strong);

TS不能准确判断实例到底是哪一种类型，因为TS不能准确判断实例到底是哪一种类型

使用类型断言

function getLanguage(type: Type) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    if ((lang as Java).helloJava) {
        (lang as Java).helloJava();
    } else {
        (lang as JavaScript).helloJavaScript();
    }
    return lang;
}

创建类型保护区块

使用instance关键字创建区块

function getLanguage(type: Type, x: string | number) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    if (lang instanceof Java) {
      lang.helloJava();
    } else {
      lang.helloJavaScript();
    }
    return lang;
}

通过in关键字判断变量所属类型来创建区块

function getLanguage(type: Type, x: string | number) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    if ("java" in lang) {
      lang.helloJava();
    } else {
      lang.helloJavaScript();
    }
    return lang;
}

通过typeof对参数x的类型进行判断,创建对应的区块

function getLanguage(type: Type, x: string | number) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    if (typeof x === "string") {
      x.length; // string
    } else {
      x.toFixed(2); // number
    }
    return lang;
}

使用类型保护函数

function getLanguage(type: Type, x: string | number) {
    let lang = type === Type.Strong ? new Java() : new JavaScript();
    if (isJava(lang)) {
      lang.helloJava;
    } else {
      lang.helloJavaScript;
    }
    return lang;
}

学习笔记出自于梁宵老师课程