1. 90前端首页
  2. 前端开发
  3. JavaScript

#typescript学习系列# 结构类型系统

1.接口的兼容性

  • 如果传入的变量和声明的类型不匹配,TS就会进行兼容性检查
  • 原理是Duck-Check,就是说只要目标类型中声明的属性变量在源类型中都存在就是兼容的
interface Animal {
    name: string;
    age: number;
  }

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

  let p: Person = {
    name: "fung",
    age: 10,
    gender: 0
  };

  let a: Animal = {
    name: "lion",
    age: 3
  };
  a = p;

2.基本类型的兼容

let num: string | number;
  let str: string = "fung";
  num = str;

3.类的兼容性
在TS中是结构类型系统,只会对比结构而不在意类型

class Animal {
    name: string | undefined;
  }

  class Bird extends Animal {
    swing: number | undefined;
  }
  
  let a: Animal;
  a = new Bird();
  let b: Bird;
  b = new Animal();//ERRO
class Animal {
    name: string | undefined;
  }
  class Bird {
    name: string | undefined;
  }
  let a: Animal;
  a = new Bird();
  let b: Bird;
  b = new Animal();

4.函数的兼容性(参数只能少不能多,返回值要求只能多不能少)
比较函数的时候是要先比较函数的参数,再比较函数的返回值

//比较参数
  type sumFunc = (a: number, b: number) => number;
  let sum: sumFunc;
  function f1(a: number, b: number): number {
    return a + b;
  }
  sum = f1;
  //可以省略一个参数
  function f2(a: number): number {
    return 0;
  }
  sum = f2;
  //可以省略二个参数
  function f3(): number {
    return 0;
  }
  sum = f3;
  //不可以多一个参数
  function f4(a: number, b: number, c: number): number {
    return a + b + c;
  }
  sum = f4; //ERRO
//比较返回值
  type GetPerson = () => { name: string; age: number };
  let getPerson: GetPerson;
  //返回值一样是可以的
  function g1() {
    return { name: "fung", age: 18 };
  }
  getPerson = g1;

  //返回值多一个属性,是可以的
  function g2() {
    return { name: "fung", age: 18, gender: "male" };
  }
  getPerson = g2;
  // 返回值少一个属性是不可以的
  function g3() {
    return { name: "fung" };
  }
  getPerson = g3;//ERRO

5.泛型的兼容性
泛型在判断兼容性的时候会先判断具体的类型,然后再进行兼容性判断

// 1.接口内容为空没用到泛型的时候是可以的
  interface Empty<T> {}
  let x!: Empty<string>;
  let y!: Empty<number>;
  x = y;
  //2.接口内容不为空的时候不可以
  interface NotEmpty<T> {
    data: T;
  }
  let x1!: NotEmpty<string>;
  let y1!: NotEmpty<number>;
  x1 = y1; //Erro

6.枚举的兼容性

  • 枚举类型与数字类型兼容,并且数字类型与枚举类型兼容
  • 不同枚举类型之间是不兼容的
 //数字可以赋给枚举
  enum Colors {
    Red,
    Yellow
  }
  let c: Colors;
  c = Colors.Red;
  c = 1;
  c = "1";//ERRO

  //枚举值可以赋给数字
  let n: number;
  n = 1;
  n = Colors.Red;

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021623557

展开阅读全文

发表评论

登录后才能评论