摸鱼偷学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,于是报错

结尾

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

相关推荐
雪碧聊技术34 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan38 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun1 小时前
react的import 导入语句中的特殊符号
前端·react.js
前端青山1 小时前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特3 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts