摸鱼偷学TS:类型兼容性

浅聊一下

周末过的太快了...回来继续学习TS

在金三银四的尾巴上了车,如果你也和我一样也想在大三找一份还不错的实习,欢迎掘友们私聊我交流面经(wechat: LongLBond

类型兼容性

类型兼容性用于确定一个类型是否能赋值给其他类型,这看起来并没有什么太大用处,而实际上当我们了解了兼容性之后才会规避之后实际编程中的很多低级错误

结构类型的兼容性

TS中的类型兼容性是基于结构类型的,结构类型是一种只使用其成员来描述类型的方式,其基本规则是,如果X要兼容Y,那么Y、至少要有与X相同的属性

举个例子:

ts 复制代码
class Person {
    name: string;
    weight: number;
    born: string;
    constructor (weight: number, name: string, born: string) {
        this.name = name;
        this.weight = weight;
        this.born = born;
    }
}
interface Dog {
    name: string;
    weight: number;
}
let dog: Dog
dog = new Person(10, 'wang', '2000')
console.log(dog);//Person { name: 'wang', weight: 10, born: '2000' }

首先,我们定义了一个Person2类,它有三个属性:name(字符串类型)、weight(数字类型)和born(字符串类型)。这个类还有一个构造函数,用于初始化这三个属性。

接着,我们定义了一个Dog接口,它有两个属性:name(字符串类型)和weight(数字类型)。

现在,关键的部分来了。我们声明了一个名为dog的变量,其类型为Dog接口。然后,我们试图使用new Person2(10, 'wang', '2000')来初始化这个dog变量。

简单来说,如果一个对象具有与某个接口相同的属性(名称和类型都匹配),那么这个对象就可以被视为该接口的类型。

函数类型的兼容性

函数类型的兼容性判断要看两个函数的参数,如果X的每个参数在Y中都能找到(名字是否相同不重要,重要的是类型相同), 那么X能赋值给Y

来举个例子:

ts 复制代码
let type1 = (c:number) => 0;
let type2 = (a:number, b:string) => 0;

type1 = type2;//Error
type2 = type1;//ok

观众老爷们看,由于type1中的number类型的参数可以在type2中找到相同类型的参数,虽然他们名字不同但是赋值成功,而将type2赋值给type1的时候由于在type1中找不到对应的string类型的参数,所以赋值失败

来看看报错

如果在函数中出现了可选参数或者rest参数时会怎么样?

ts 复制代码
let type3 = (a:number, b:number) => 0;
let type4 = (a?:number, b?:number) => 0;
let type5 = (...args:number[]) => 0;

type3 = type4;
type4 = type3;//Error

type3 = type5;
type5 = type3;

type4 = type5;//Error
type5 = type4;

来看看报错

我们的可选属性的参数类型可能为undefind,这种情况不能和number兼容

枚举类型的兼容性

枚举与数字类型兼容

ts 复制代码
enum Status {
    x,
    y
}
let s0 = Status.x;
let sum = 1;
s0 = sum;//ok
sum = s0;//ok

类的兼容性

仅仅只有实例成员和方法会相比较,构造函数和静态成员不会被检查:

ts 复制代码
class Ani {
    name: string;
    constructor (name: string, age: number) {
        this.name = name;
    }
    eat() {
        console.log('eat');
    }
}
class Peo {
    name:string;
    constructor (name: string,sex: string) {
        this.name = name;
    }
    eat() {
        console.log('eat');
    }
    
}
let a1: Ani = new Ani('zhangsan',18);
let a2: Peo = new Peo('lisi', 'male');
a1 = a2;//ok
a2 = a1;//ok

在这里只比较了类中的name属性和eat方法,如果他们其中之一不相同的话,就会报错

私有的和受保护的成员必须来自于相同的类:

ts 复制代码
class Ani1 {
    protected name: string;
    constructor (name: string, age: number) {
        this.name = name;
    }
    eat() {
        console.log('eat');
    }
}
class Cat2 extends Ani1 {}

let ani: Ani1 = new Cat2('zhangsan', 18);
let cat = new Cat2('zhangsi',18);

ani = cat;//ok
cat = ani;//ok

class Peo1 {
    protected name:string;
    constructor (name: string,sex: string) {
        this.name = name;
    }
    eat() {
        console.log('eat');
    }
    
}
let a11: Ani1 = new Ani1('zhangsan',18);
let a22: Peo1 = new Peo1('lisi', 'male');
a11 = a22;//error
a22 = a11;//error

泛型的兼容性

泛型本身就是不确定的类型,它的表现根据是否被成员使用而不同.

就比如下面代码

ts 复制代码
interface Person<T> {

}

let x : Person<string>
let y : Person<number>

x = y // ok
y = x // ok

Person接口内没有属性使用了T,所以没有问题

ts 复制代码
interface Person<T> {
    name: T
}

let x : Person<string>
let y : Person<number>

x = y // 不能将类型"Person<number>"分配给类型"Person<string>"。
y = x // 不能将类型"Person<string>"分配给类型"Person<number>"。

name属性使用了T,于是报错

结尾

类型兼容性就到这里了...

相关推荐
LaoZhangAI2 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
晓风伴月13 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam13 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe14 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao14 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺14 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047914 分钟前
useMemoize 方法源码解读与实战应用
前端·源码
青青奇犽15 分钟前
跨域问题全解析:七种方法轻松拿捏跨域
前端·javascript·面试
loooseFish16 分钟前
使用canvas模拟 美图AI画质消除中 选中区域上传(第一次正式使用canvas小记)
前端
oil欧哟29 分钟前
😎 MCP 从开发到发布全流程介绍,看完不踩坑!
人工智能·typescript·node.js