ts 接口兼容性，跟ts类型没有关系，只跟属性有关系

  1. namespace a {
  3.   //接口的兼容性
  4.   interface Animal {
  5.     name: string;
  6.     age: number;
  7.   }
  8.   interface Person {
  9.     name: string;
  10.     age: number;
  11.     speak: (words: string) => void
  12.   }
  13.   function getName(animal: Animal): string {
  14.     return animal.name;
  15.   }
  16.   let p: Person = {
  17.     name: 'aaa',
  18.     age: 10,
  19.     speak() { }
  20.   }
  21.   console.log(getName(p));
  23.   //基本类型的兼容性 
  24.   //可以把一个具体的值赋值给另一个 更广泛的类型
  25.   let num: string | number;
  26.   let str: string = "string";
  27.   num = str;
  29.   let num2: {
  30.     toString(): string
  31.   }
  32.   let str2: string = "asda";
  33.   //这里只要赋值的变量有tostring方法就可以，也可以是另一个多有个值的对象，
  34.   //只要有tostring方法就可以
  35.   num = str2;
  36. }
  38. //类的兼容
  39. //跟 类型无关 ，跟属性有关，属性多于申明的 就可以值
  40. namespace b {
  41.   class Animal {
  42.     name: string
  43.   }
  44.   class Bird extends Animal {
  45.     // swing: number
  46.   }
  47.   let a: Animal;
  48.   a = new Bird();
  50.   let b: Bird;
  51.   b = new Animal();
  52.   b = { name: 'asd' }; //不管这个对象的具体类型，只要属性有就可以 
  53. }
  55. namespace c {
  56.   //函数兼容性 
  57.   //函数兼容性比较参数 
  58.   //参数可以比之前少但是不能多
  59.   //返回值可以比之前多，但是不能比之前少
  60.   type sunFunction = (a: number, b: number) => number;
  61.   let sum: sunFunction;
  62.   function f1(a: number, b: number): number {
  63.     return a;
  64.   }
  65.   sum = f1;
  66.   function f2(a: number): number {
  67.     return a;
  68.   }
  69.   sum = f2;
  70.   function f3(): number {
  71.     return 1;
  72.   }
  73.   sum = f3;
  74.   function f4(a: number, b: number, c: number): number {
  75.     return a;
  76.   }
  77.   // sum = f4; 
  78.   //返回值少了不可以，多了可以
  79.   type GetPerson = () => { name: string, age: string };
  80.   let getPerson: GetPerson;
  81.   function g1() {
  82.     return { name: '23', age: '12' };
  83.   }
  84.   getPerson = g1;
  86.   function g2() {
  87.     return { name: '23' };
  88.   }
  89.   // getPerson = g2; // 少了不行
  91.   function g3() {
  92.     return { name: '23', age: '12', data: '123' };
  93.   }
  94.   getPerson = g3; // 少了不行,多了可以
  95. }
  97. namespace d {
  98. //函数参数的协变
  99.   //参数双向协定（但是现在实现不了了）
  100.   //参数接受类型可以比之前多一些，但是不能比之前少，满足不了需求
  101.   type logFunc = (a: number | string) => void;
  102.   let log: logFunc;
  103.   function log1(a: number | string | boolean) {
  104.     console.log(a);
  105.   }
  106.   log = log1;
  108.   //泛型的兼容性
  109.   //判断兼容性的时候，先判断具体的类型，在进行兼容性判断
  110.   //要看属性的兼容性，接口的值是空的时候是可以赋值的
  111.   //但是如果 接口返回值不同时，就会报错
  112.   interface Empty<T> {
  113.     data: T
  114.   }
  115.   let x: Empty<string>;  //{data:string}
  116.   let y: Empty<number>;  //{data:number}
  117.   // x = y;
  119.   //枚举的兼容性
  120.   enum Colors {
  121.     Red, Yellow
  122.   }
  123.   let c: Colors;
  124.   c = Colors.Red;//0
  125.   c = 1;
  126.   let d: number;
  127.   d = Colors.Yellow;//1
  128. }

类型保护

  1. namespace a {
  3.   //类型保护 就是更精确的知道是哪种类型
  4.   //ts会根据你的代码 查看你当前面的数据类型
  5.   function double(input: string | number | boolean) {
  6.     if (typeof input === 'string') {
  7.       input.toLocaleLowerCase()
  8.     } else if (typeof input === 'number') {
  9.       input.toFixed();
  10.     } else {
  11.       input;
  12.     }
  13.   }
  15.   class Animal {
  16.     public name: string = 'asd';
  17.   }
  18.   class Birder extends Animal {
  19.     public swing: string = "asd1";
  20.   }
  22.   function getName(a: Animal) {
  23.     if (a instanceof Birder) {
  24.       a.swing
  25.     } else {
  26.       a.name
  27.     }
  28.   }
  30.   //null保护
  31.   //如果在函数内部去兼容了null，有可能ts 因为作用域问题，识别不了
  32.   //所以可以加一个非空断言
  33.   function getFirstLetter(s: string | null) {
  34.     // if (s === null) {
  35.     //   s = '';
  36.     // }
  37.     function ensure() {
  38.       s = s || '';
  39.     }
  40.     ensure()
  41.     // s = s || '';
  42.     return s!.charAt(0);
  43.   }
  45.   //链判断运算符
  46.   //1是先检查一种类型是不是存在，然后在访问该属性的运算符号，
  47.   //2如果运算符左侧的操作数?.计算结果为undefind 或 null，则表达式
  48.   //返回值为undefined ，否则正常触发目标的属性访问，方法或者函数调用
  50.   let a1 = { b: 1, c: () => { } };
  51.   let a2 = () => { };
  53.   //先判断a是否为null或者undefind 
  54.   console.log(a1 ? a1.b : a1);
  57.   a1?.['b'];
  58.   a1?.c();
  60.   a2?.();
  62.   //可辨识的联合类型
  63.   //1.就是利用联合  类型中的共有字段进行类型保护的一种技巧
  64.   //2.相同字段的不同取值就是可辨识
  66.   interface WarningButton {
  67.     //接口class 的值是一个字符串，表示他也是一个类型
  68.     //意思就是一个字面量 类型
  69.     class: 'Warning',
  70.     text1: '修改'
  71.   }
  74.   interface DangerButton {
  75.     class: 'Danger',
  76.     text2: '删除'
  77.   }
  78.   type Button = WarningButton | DangerButton;
  79.   function getButton(button: Button) {
  80.     if (button.class === "Warning") {
  81.       button.text1;
  82.     } else {
  83.       button.text2;
  84.     }
  85.   }
  87.   //判断是不是有哪些属性
  88.   interface Bird {
  89.     swing: number
  90.   }
  91.   interface Dog {
  92.     leg: number
  93.   }
  94.   function getNumber(x: Bird | Dog) {
  95.     //判断属性值是不是在x 内
  96.     if ('swing' in x) {
  97.       x.swing;
  98.     } else {
  99.       x.leg;
  100.     }
  101.   }
  102. }
  103. //自定义的类型保护
  104. //ts的类型保护实际就是一些表达式，会在运行时检查类型信息，以确保
  105. //在某个作用域里的类型时符合预期的
  106. //要自定义一个类型保护，只需要简单的为这个类型保护定义一个函数即可，
  107. //这个函数的返回值是一个类型谓词
  108. //类型谓词的语法就是： 当前函数某个参数参数 is Type 
  109. namespace b {
  110.   interface Bird {
  111.     name1: '1'
  112.     leg: number
  113.   }
  114.   interface Dog {
  115.     name2: '2'
  116.     leg: number
  117.   }
  118.   //自定义的类型保护器
  119.   function isBird(x: Bird | Dog): x is Bird {
  120.     //自定义一个规则
  121.     return x.leg === 2;
  122.   }
  123.   function getAnimal(x: Bird | Dog) {
  124.     if (isBird(x)) {
  125.       x.leg; //x就是鸟
  126.       x.name1
  127.     } else {
  128.       x.name2 //就不是鸟
  129.     }
  130.   }
  131.   let x: Bird = { name1: '1', leg: 2 };
  132.   getAnimal(x);
  133. }

问题

1.一个函数可以绑定多个泛型么？
function swap(a: T, b: U) {
}

2.接口数据类型定义为什么有时候是冒号，有时候是=>
//定义数据类型就是： ，但是定义函数=>表示函数 后跟返回值
interface Bird {
name: string;
fly(): void;
speak: (words: string) => void;
}

3.类型兼容
//就是值在日常编程中 重新赋值不报错，也就是类型自动可以转化