TypeScript学习总结（11）

TS的类型兼容性

一、对象之间的类型兼容性

在结构化类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型，这种说法并不准确。

更准确的说法:对于对象类型来说，y的成员至少与x相同，则x兼容y(成员多的可以赋值给少的)

class Person {
    x: number
    y: number
}
class Person1 {
    x: number
    y: number
}
const p:Person= new Person1()

解释:
1.Person1的成员至少与Person相同，则Person兼容Person1.
所以，成员多的 Person1 可以赋值给成员少的Person。

 二、接口之间的类型兼容性

 接口之间的兼容性，类似于class。并且，class和interface 之间也可以兼容。

interface Point{
    x: number
    y: number
}
interface Point2D { 
    x: number
    y: number
}
let p1: Point = {x: 10, y: 20 }
let p2: Point2D = p1
interface Point3D { 
    x: number
    y: number
    z: number
}
let p3: Point3D = { x: 10, y:10 , z: 30 }
p2 = p3

class Point2D {
    x: number
    y: number
}
class Point3D {
    x: number
    y: number
    z: number
}
let p3: Point2D = new Point3D()

三、函数之间的类型兼容性 

函数之间兼容性比较复杂，需要考虑:参数个数，参数类型，返回值类型。

1.参数个数

参数个数：参数多的兼容参数少的(或者说，参数少的可以赋值给多的)

type F1 = (x: number) => void
type F2 = (x: number, y: number) => void
let f1: F1 
f1 = (x) => { console.log(x)}
let f2: F2 = f1
console.log(f1(10))

const arr = [1, 2, 3, 4, 5]
arr.forEach(() => { })
arr.forEach((item) => { })

解释:
参数少的可以赋值给参数多的，所以，f1可以赋值给f2

在js 中省略用不到的函数参数实际上是很常见的，这样的使用方式，促成了 TS 中函数类型之间的兼容性。

并且因为回调函数是有类型的，所以，TS会自动推导出参数item、index、array的类型。 

2.参数类型

参数类型，相同位置的参数类型要相同(原始类型)或兼容(对象类型)。

type F1 = (x: number) => number
type F2 = (x: number) => number
let f1: F1
f1 = (x) => { return x }
let f2: F2 = f1

解释:

函数类型 F2 兼容函数类型 F1，因为 F1和 F2 的第一个参数类型相同。 

interface Point2D {
    x: number
    y: number
}
interface Point3D {
    x: number
    y: number
    z: number
}
type F2 = (p: Point2D) => void
type F3 = (p: Point3D) => void
let f2: F2
f2 = (p) => { }
let f3: F3 = f2

解释:
注意：此处与前面讲到的接口兼容性冲突，
技巧：将对象拆开，把每个属性看做一个个参数，则，参数少的(f2)可以赋值给参数多的(f3)。 

 3.返回值类型

type F5 = () => string
type F6 = () => string
let f5: F5
f5 = () => { return "Hello" }
let f6: F6 = f5

type F7 = () => { name: string } 
type F8 = () => { name: string, age: number }
let f7: F7
let f8: F8
f8 = () => { return { name: "John", age: 20 } }
f7 = f8

 解释:
1.如果返回值类型是原始类型，此时两个类型要相同，比如，F5和F6。
2.如果返回值类型是对象类型，此时成员多的可以赋值给成员少的，比如，F7和 F8。