前端与 TypeScript | 青训营笔记

92 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

TS一直都是久仰大名了,之前也学过一段时间的ts,最近的项目也都是拿ts做的,林皇老师的这节课首先让我回顾温习巩固了TypeScript的基础,然后在基础中也有一些细节让我深受启发,后面的高级的一些应用更是让我对ts有了更深入的理解。总体来说,这节课同样是收获巨大的一节课。

一,本堂课重点内容

本堂课围绕TypeScript开展,首先详细介绍了TypeScript的重要性与发展,还有他独特的优势。然后开始讲解了TypeSript的基础语法,基本数据类型的使用等,然后有讲解了对于函数的约束和interface接口,type泛型,数组,对象,重载,枚举,类型别名和类型断言等等。接下来老师开始讲解了TS中的一些高级应用,比如交叉数据类型,类型保护和类型守卫,和一些高级类型。最后讲解了TS的工程应用。

二,详细知识点介绍

基本数据类型可以用来修饰普通的js变量,对其进行约束,提高他的健壮性,可读性。interface接口可以用来定义更复杂的对象类型,可以用来约束复杂的对象或者是函数返回值,也可以用于函数的重载等。泛型可以不预先指定类型,在实际的运行中指明类型,也可以通过一些如extends的关键词对泛型有一个大致范围的约束。枚举类型:支持枚举名到枚举值的正反向映射。类型别名可以通过type来定义其别名,断言则是通过as关键字来断言某类型为正确的类型。

我们在写一些interface的时候可能会出现重复的情况我们可以结合联合类型和交叉类型的语法,将多种类型叠合合并,使其符合预期。

类型保护类型保护是可执行运行时检查的一种表达式,用于确保该类型在一定的范围内,有时候两个对象不存在相同属性的时候,我们要自定义类型守卫,而反之,我们也可以用ts自带的类型首位来完成。

在工程化方面,我们可以做如下事情

  • 配置Webpack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动打包
  • loader处理ts文件时,会进行编译与类型检查

我们在脱离浏览器执行ts时,可以选择Node与tsc进行编译。

三,实践的例子

interface IA {
    a1:1,
    a2:1
}

interface IB {
    b1:2,
    b2:2
}

function getIsIA(arg:IA|IB): arg is IA {
    return !!(arg as IA).a1;
}

function log2(arg:IA | IB) {
    if(getIsIA(arg)) {
        console.log(arg.a1);
    }
    else {
        console.log(arg.b1);
    }
}

let a:IA = {a1:1,a2:1}; 

let b:IB = {b1:2,b2:2}

log2(a);

log2(b);

console.log(((a as IA).a1));

打印出的结果

1
2
1

四,课后个人总结

对于一些ts的细节和一些更高级优雅的方式我的掌握程度还是远远不够,接下来我会加强对ts的学习与练习,争取写出更优雅的ts代码。