TypeScript——类型兼容与赋值

为什么要兼容？因为实际工作中往往无法类型一致。

一. 简单类型

范围小的 可以赋值给 范围大的。（前提是小的是包含在大的里面）

二. 普通对象

属性多的 可以赋值给 属性少的。

type Person = { 
  name: string
  age: number
}
let user = { // user属性多
  name: string
  age: number
  id: number
  email: string
}
let person:Person // person属性少
person = user

父子接口

属性多的 可以赋值给 属性少的。
也可以说 子 可以赋值给 父。

interface father {
  x: string
}
interface son extends father {
  y: string
}
let objectChild: son = {
  x: 'yes',
  y: 'yes'
}
let objectParent: father
objectParent = objectChild

三. 函数

函数包括参数和返回值

1. 参数

1.1 参数个数不同

参数少的 可以赋值给 参数多的。

let fn1 = (a: number) => {
  console.log(a)
}
let fn2 = (b: number, c: string) => {
  console.log(b,c)
}
fn2 = fn1

1.2 参数类型不同

对参数要求少的 可以赋值给 对参数要求多的。

interface MyEvent { //对参数要求少
  target: string
}
interface MyMouseEvent extends MyEvent { //对参数要求多
  x: number
  y: number
}
let listener = (e: MyEvent) => console.log(e.target)
let mouseListener = (e: MyMouseEvent) => console.log(e.x, e.y)
mouseListener = listener

如果想要函数随便赋值不报错，可以修改 tsconfig.json 文件。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "strictFunctionTypes": false,
    ...
  }
}

2. 返回值

兼容返回值类型不同的函数
返回值属性多的 可以赋值给 返回值属性少的。

let fn1 = () => {
  return { name: "Alice" }
}
let fn2 = () => {
  return { name: "Alice", age: 18 }
}
fn1 = fn2

特殊类型（赋值表）

顶类型和底类型

越下面就可以往上面赋值(兼容)