类型兼容性

    ts的类型兼容性是基于结构类型的。 结构类型是一种只使用其成员来描述类型的方式。(大白话:看属性兼容) 
    如果传入的变量A和声明的类型B不匹配,ts会进行兼容性检查
    只要用户传入变量A中的属性>=在源类型B要求的属性,那么认为就是兼容的
  interface INamed {
    name: string
  }
  class Person {
    name: string
  }
  let p = <INamed>{} //按照接口定义一个变量p
  p = new Person()  //p可以去当Person类实例对象 这里也是ts兼容性检查。只要Person类包含name实例就可以赋值给p
  console.log(p);

  let p1 = { name: 'Alice', age: 10 }
  p = p1  //这也是ts兼容性检查 只要p1对象里面又name属性就可以赋值给P

接口兼容性

//接口的兼容性
  interface Animal {
    name: string
    age: number
  }
  interface Person {
    name: string
    age: number
    gender: string
  }
  interface IGetNameFunc {
    (animal: Animal): string //注意这里要求传入的是Animal类型对象
  }
  const getName: IGetNameFunc = animal => animal.name
 
  const p: Person = { name: 'zs', age: 12, gender: 'male' }
  const dog0: Animal=p //Animal实例居然可以等于p实例对象 这个也是ts兼容性检查
  const dog: Animal = { name: 'xiaoHui', age: 1 }

  getName(dog) //传入Animal实例对象dog是很正常的
  getName(p) //传入Person实例对象p居然也是可以的。这里就是ts兼容性检查 只要p包含name、age属性就是可以的

 类的兼容性

 // 类的兼容性 

  class Animal {
    name: string
  }
  class Bird extends Animal {
    fly(): void { }
  }
  const a:Animal=new Animal() //这是很正常的
  const b:Animal=new Bird() //父变量引用子实例对象 这其实也是ts兼容性检查
  // const c:Bird=new Animal() // ERROR Bird要求有name/fly属性。但是右边的Animal只有name属性 所以报错
  const d:Animal={name:'zs'} //甚至这个也是ts兼容性检查

函数兼容性

右边具体函数的定义参数要<=左边定义函数的参数参数,且类型必须相同。右边具体函数返回值属性个数>=左边定义函数返回值属性个数。且返回值类型必须相同。这样才会兼容

 // let sum:ISunFunc=(a,b)=>a 这个就是我写函数的方法啊 原来这就是函数兼容性 
  sum=function(a:number): number { //这个只不过拆开写而已 本质一样的 右边参数可以少不能多
    return a
  }
interface ISunFunc { //用type定义也可以
    (a: number, b: number): number
  }
  type sunType = (a: number, b: number) => number
  let sum: ISunFunc;
  //比较参数的个数 参数类型不能改变
  function fn1(a: number, b: number,): number {
    return a
  }
  function fn2(a: number): number {
    return a
  }

  function fn3(a: number, b: number, c: number): number {
    return a
  }
  sum = fn1 // 参数可以一样 
  sum = fn2 //参数可以少
  // sum=fn3  Error 参数可以少 但是不能多 f3的参数个数>sum定义的个数 所以报错




  // 比较返回值  右边函数返回值属性>=定义函数的返回值属性 且属性类型不可改变
  type getPersonType=()=>{name:string,age:number}
  let getPerson:getPersonType
  function getPerson1(){
    return {name:'zs',age:10,gender:'male'}
  }
  function getPerson2(){
    return {name:'zs'}
  }
  getPerson=getPerson1 //getPerson1返回值类型>getPerson返回值类型 这是允许的
  // getPerson=getPerson2  Error getPerson2返回值类型<getPerson返回值类型 这是报错
原文地址:https://www.cnblogs.com/xiaoliziaaa/p/14982169.html