TS中的兼容性

TS 中的兼容性

1. 自动类型推论

export default {};

// 根据初始值推论
// 相当于 let uname: string = "陈乔恩";
let uname = "陈乔恩";
uname = "徐璐";
// uname = 123;
// uname = true;

// 相当于 let x: (number | null)[] = [0, 1, null];
let x = [0, 1, null];
// x = [20, 30 , 40, 50, null, "abc", true];

// 这里不能进行类型推论
// let uage;
// uage = 123;
// uage = true;

// 根据上下文推论
window.onmousedown = function (mouseEvent) {
  mouseEvent.button;
  mouseEvent.clientX;
};

2. 对象类型兼容性

export default {};

// 注意点： 可多不可少
interface INameTest {
  name: string;
}

let n1 = { name: "祝绪丹" };
let n2 = { name: "江疏影", age: 18 };
let n3 = { age: 18 };

let val: INameTest;
val = n1;
val = n2;
// val = n3;

// 注意点: 类型必须一一对应, ts内部会进行递归检查
interface ITestInfo {
  name: string;
  children: {
    age: number;
  };
}

let p1 = { name: "吴宣仪", children: { age: 18 } };
let p2 = { name: "吴宣仪", children: { age: true } };

let t: ITestInfo;
t = p1;

// t = p2;

3. 函数类型兼容性

export default {};

// 参数个数
// 注意点： 可少不可多
// let func1 = (a: number, b: string) => {}
// let func2 = (x: number) => {}

// func1 = func2;
// func2 = func1;

// 参数类型
// 注意点: 参数类型必须相同
// let func1 = (x: number) => {}
// let func2 = (x: number) => {}
// let func3 = (x: string) => {}

// func1 = func2;
// func2 = func1;
// func1 = func3;
// func3 = func1;

// 返回值类型
// 注意点： 返回值类型必须相同
// let func1 = (): number => 18;
// let func2 = (): number => 28;
// let func3 = (): string => "返回值类型的兼容性";

// func1 = func2;
// func2 = func1;
// func1 = func3;
// func3 = func1;

// 函数双向协变
// 1.参数的双向协变
// 注意点: 可以多的赋值给少的
// let func1 = (x: number) => {}
// let func2 = (x: (number | string)) => {}

// func1 = func2
// func2 = func1

// 2.返回值的双向协变
// 注意点： 不能将返回值是联合类型的赋值给具体的；可以将返回值是具体类型的赋值给联合类型的
// let func1 = (x: boolean):(number | string) => x ? 18: "张含韵";
// let func2 = (x: boolean): boolean => true;

// func1 = func2;
// func2 = func1;

// 函数重载
// 注意点: 不能将重载少的赋值给重载多的,  可以将重载多的赋值给重载少的
// function add(x: number, y: number): number;
// function add(s: string, y: string): string;
// function add(x: any, y: any): any {
//   return x+y;
// }

// function sub(x: number, y: number): number;
// function sub(x: any, y: any) {
//   return x - y;
// }

// let fn = add;
// fn = sub;

// let fn = sub;
// fn = sub;

// 可选参数及剩余参数
// 当一个函数有剩余参数的时候, 它被当做无限个可选参数
function func(args: any[], callback: (...args: any[]) => void) {}
func([1, 2], (x, y, z) => console.log(x + y + z));
func([1, 2], (x?, y?) => console.log(x + y));
func([1, 2], (x, y?, z?) => console.log(x + y + z));

4. 枚举类型的知识点补充

export default {};

// 1.数字枚举
/* 
  注意点： 1.数字枚举的取值可以是字面量, 也可以是常量, 也可以是计算的结果
          2.如果采用字面量对第一个成员进行赋值, 下面的成员会自动递增
          3.如果采用常量或计算结果进行赋值, 则下面的成员也必须初始化
*/
// enum Gender {
//   Male,
//   Female
// }

// console.log(Gender.Male); // 0
// console.log(Gender.Female); // 1
// console.log(Gender[0]); // Male

// const val = 100;
// const num = () => 200;

// enum Gender {
//   // Male = 1,
//   // Female
//   Male = val,
//   Female = num()
// }

// console.log(Gender.Male); // 100
// console.log(Gender.Female); // 200

// 2.字符串枚举
/* 
 1.如果采用字面量对第一个成员进行赋值, 下面的成员也必须赋值
 2.采用[index]的形式不能获取到内容,需要传入[key]
 3.字符串枚举不能使用常量或者计算结果给枚举值赋值
 4.它可以使用内部的其它枚举值来赋值
*/
enum Direction {
  up = "UP",
  down = "DOWN",
}

// console.log(Direction.up); // UP
// console.log(Direction.down); // DOWN
// console.log(Direction[0]); // undefined
// console.log(Direction["up"]); // UP
// console.log(Direction["DOWN"]); // undefined

// const val = "金晨";
// const res = () => "王鸥";

// enum User {
//   // a = val
//   // b = res()
//   c = "HTML",
//   d = c
// }

// 3.异构枚举
// enum Gender {
//   Male = 1,
//   Female = "女"
// }

// console.log(Gender.Male);  // 1
// console.log(Gender.Female); // 女
// console.log(Gender[0]); // undefined
// console.log(Gender["女"]); // undefined
// console.log(Gender["Male"]); // 1

// 4.把枚举成员可以当做类型来使用
enum Gender {
  Male,
  Female,
}

interface ITestInterface {
  age: Gender; // age: (Gender.Male | Gender.Female)
}

class Person implements ITestInterface {
  age: Gender.Female = 1;
}

5. 枚举类型的兼容性

export default {};

// 数字枚举与数字兼容
// enum Gender {
//   Male,
//   Female
// }

// let value: Gender;
// value = Gender.Male;
// value = 100;

// 数字枚举与数字枚举不兼容
// enum Gender {
//   Male,
//   Female
// }
// enum Animal {
//   Dog,
//   Cat
// }

// let value:Gender;
// value = Gender.Female;
// value = Animal.Dog;

// 字符串枚举与字符串不兼容
enum Gender {
  Male = "张若昀",
  Female = "唐艺昕",
}

let value: Gender;
value = Gender.Male;
value = Gender.Female;

// value = "娃嘻嘻"

6. 类的兼容性

export default {};

// 注意点： 可多不可少
// class Animal {
//   feet: number;
//   age: number;
//   constructor(name: string, numFeet: number) {}
// }

// class Size {
//   feet: number;
//   constructor(numFeet: number) {}
// }

// let a: Animal;
// let s: Size;
// s = a;
// a = s;

// private / protected
class Animal {
  protected feet: number;
  constructor(name: string, numFeet: number) {}
}

class Size {
  private feet: number;
  constructor(numFeet: number) {}
}

let a: Animal;
let s: Size;
s = a;
a = s;

7. 泛型的兼容性

export default {};

// 因为TS是一个结构化的类型系统, 类型参数只在作为成员类型的一部分被消耗时影响到结果类型
// interface Empty<T> {}

// let x: Empty<number>;
// let y: Empty<string>;
// x = y;
// y = x;

interface NotEmpty<T> {
  data: T;
}

let x: NotEmpty<number>;
let y: NotEmpty<string>;

x = y;
y = x;