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

前言

接着上次的TS记录继续哦。

高级类型

联合/交叉类型

联合类型: IA | IB; 联合类型表示一个值可以是几种类型之一
交叉类型: IA & IB; 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

上述代码可以通过ts简化为：

类型保护与类型守卫

访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分

类型守卫：定义一个函数，其返回值是一个类型谓词，生效范围为子作用域

实现一个子集不污染的合并函数merge，将sourceObj合并到targetObj中，sourceObj必须为targetObj的子集

在ts中编写两个类型，进行判断

interface ISource0bj { 
    x?: string; 
    y?: string; 
}
interface ITarget0bf {
    x: string;
    y: string;
}
type IMerge = (source0bj: ISource0bj, target0bj: ITarget0bj) => ITargetObj;
/* 类型实现繁琐:若obj类型较为复杂，则声明source和target便需要大量重复2遍
容易出错:若target增加/减少key,则需要source联动去除 */

TypeScript提供了从旧类型中创建新类型的一种方式——映射类型。在映射类型里，新类型以相同的形式去转换旧类型里每个属性。

关键字keyof，其相当于取值对象中的所有key组成的字符串字面量
关键字in，其相当于取值字符串字面量中的一种可能，配合泛型P， 即表示每个key
关键字 ? ，通过设定对象可选选项，即可自动推导出子集类型

函数返回值类型

// 如何实现函数delayCall的类型声明
// delayCall接受一个函数作为入参，其实现延迟1s运行函数
// 其返回promise，结果为入参函数的返回结果
function delayCall(func) {
    return new Promisd(resolve => {
        setTimeout(() => {
            const result= func );
            resolve(result);
        },1000);
    });
}

工程应用

TypeScript工程应用——Web

这里的babel是一个js预编译器，简单来说就是为了解决浏览器兼容的问题，主要是js的语法一直在更新，但是一些老的浏览器不支持新的ES6这样的语法，所以就需要babel给它把语法转换成老的语法让浏览器可以识别。

至于webpack可以学的就太多了，webpack我当时是跳过去了，直接去了vue，这个时候再看就很后悔，还是要把基础打扎实了。

TypeScript工程应用——Node

TS是无法直接被识别的，需要tsc翻译成js语言，但是在实际执行中安装tsc-node这个插件，就可以直接得到js，不用手动的转换了。

总结

这词儿TS学习只是做了一个大致的了解，还要很多很多的东西需要课下花时间学习，希望可以尽快的上手TS，毕竟马上就要做项目！

TypeScript 入门（2）｜ 青训营笔记

前言