「TypeScript」入门基础(四)?

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

前言?

• 虽然之前有学过ts但是平时业务上面都还是用JavaScript来开发导致逐渐对TypeScript生疏了。
• 借此更文活动的机会再来一起学习一下TypeScript的知识吧。
• 本文也是TypeScript基础篇的最后一篇，接下来会分享一下进阶篇的知识。

类型断言?

• 类型断言可以用来手动指定一个值的类型。
• 类型断言一般使用as来连接，即值 as类型。

断言为联合类型中的一个类型?

• 我们一般在什么时候需要使用到断言呢？我们之前联合类型提到:

let someThing: string | number;
someThing = 'lwj';
someThing = 5201314;
console.log(someThing.length) //报错
复制代码

• 在上面的代码中最后的someThing.length是执行不了的，因为TypeScrip实际上是'不确定'该值什么时候是什么类型的，所以会报错，这时候我们可以使用类型断言。

interface Student {
    name: string;
    speak(): string;
}
interface Teacher {
    name: string;
    talk(): string;
}
function isTeacher(people: Student | Teacher) {
    people.talk() //报错
    (people as Teacher).talk() //不报错
    return false;
}
复制代码

• 像上面定义了两个接口分别有相同的属性和不同的方法，当我们执行people.talk()的时候其实TypeScrip不知道该值是属于Student还是Teacher的，所以他自然而然会报错，但是当我们使用了类型断言后，这样相当于就是告诉TypeScrip这个people就是Teacher类型，自然而然也不会报错了。
• 但是使用类型断言也会有不好的地方，就比如

interface Student {
    name: string;
    speak(): void;
}
interface Teacher {
    name: string;
    talk(): void;
}
function isTeacher(people: Student | Teacher) {
    (people as Teacher).talk() //不报错
    return false;
}
const man:Student={
    name:'lwj',
    speak(){console.log('编译器不报错')}
}
isTeacher(man) //运行时报错
复制代码

• 在上面这个例子中我们给isTeacher函数传入了一个man对象，这个对象没有talk方法，但是当我们运行isTeacher时我们断言了这个参数是Teacher类型，也就是我们断言了这个参数会有talk方法，所以编译器相信了我们不报错，但是事实上man对象是没有talk方法的所以最后转换成js编译的时候会报错。

断言为任意（any）?

• 在TypeScript中我们一般用对象 . 属性或方法来获取属性或者执行方法。
• 我们在JavaScript中也可以直接使用对象 . 属性或方法来新增一个属性或方法，但这样的操作在TypeScript是不允许的。

• 如上图所示我们想给window对象新增一个num属性值为1，这样会报错，所以我们可以将window断言为any。

(window as any).num = 1; //不报错
复制代码

• 即使断言可以这样时候，但是这也是我们迫不得已实在没办法了才用的，我们既然使用了TypeScript就要用严格的类型规范来规范我们的项目。

类型断言的限制?

• TypeScript是结构类型系统，类型之间的对比只会比较它们最终的结构，而会忽略它们定义时的关系。
• 在TypeScript中并不是所有类型都可以断言为另一个类型，类型要可以断言必须满足一个条件兼容。
• 兼容说起来也不是特别难理解。

interface Student {
    name: string;
}
interface Teacher {
    name: string;
    talk(): void;
}

function testpeople(teacher: Teacher) {
    return (teacher as Student);
}
function people(student: Student) {
    return (student as Teacher);
}
复制代码

• 在上面的代码中第一个teacher as Student不会报错是因为Teacher其实可以理解为是继承了Student的属性然后新增了一个talk()，所以在这程度上Teacher是兼容Student的。
• 而第二个student as Teacher不会报错是因为Teacher拥有所有Student的属性和方法，就比如他拥有了name属性，所以在这程度上Student是兼容Teacher的。
• 所以我们在判断两个类型是否兼容的时候只需要看到一个类型的属性和方法在另一个类型里面是不是都有，如果是那么他们就是兼容的，就可以使用断言。

写在最后?

• 本文也算是记录一下TypeScript的学习，接下来我会持续输出TypeScript相关的知识，大家可以一起来学习。
• 如果您觉得这篇文章有帮助到您的的话不妨?关注+点赞+收藏+评论+转发?支持一下哟~~?

往期精彩?

「TypeScript」入门基础(一)?

「TypeScript」入门基础(二)?

「TypeScript」入门基础(三)?