TypeScript入门 | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第4天一、本堂课重点内容： Type

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

一、本堂课重点内容：

TypeScript 历史及定义解析
TypeScript 优势解读
联合交叉类型
类型保护与类型守卫
Merge 函数类型实现
函数返回值类型
TypeScript 工程应用

二、详细知识点介绍：

TypeScript 历史及定义解析

2012-10:微软发布了TypeScript第一个版本(0.8)
2014-10: Angular 发布了基于TypeScript的2.0版本
2015-04:微软发布了Visual Studio Code
2016-05: @types/react发布，TypeScript可开发 React
2020-09: Vue 发布了3.0版本，官方支持 TypeScript
2021-11:v4.5版本发布

TypeScript是静态类型语言（如python、java），而JavaScript是动态类型语言，二者都是弱类型语言（都可以类型转换）。

TypeScript 优势解读

因为TypeScript是静态类型语言：

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误

=>进而在多人合作的大型项目中能获得更好的稳定性和开发效率

同时TypeScript还是JS的超集：

包含于兼容所有Js特性，支持共存
支持渐进式引入与升级

联合交叉类型

联合类型：IA | IB;联合类型表示一个值可以是几种类型之一。

交叉类型: IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

类型保护与类型守卫

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

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

联合类型+类型保护=自动类型判断

Merge 函数类型实现

/**
*实现merge函数类型
*要求sourceObj必须为targetObj的子集
*/
function merge1(source0bj, target0bj) {
    const result = { ...source0bj };'
    for(let key in target0bj) {
        const itemVal = sourceO0bj [key];
        itemVal &&( result[key] = itemVal );
    }
    itemVal &&( result[key] = itemVal );
}
function merge2(source0bj, target0bj) {
    return i ...source0bj, ...target0bj };
}

interface Imerge {
    <T extends Record<string,any>>(sourceObj: Partial<T>, targetObj:T):T;
}
//索引类型:关键字【keyof】 ,其相当于取值对象中的所有key组成的字符串字面量,如
type IKeys = keyof { a: string; b: number }; // => type IKeys = "a" |"b"
//关键字【in】,其相当于取值字符串字面量中的一种可能，配合泛型P,即表示每个key
关键字【?】,通过设定对象可选选项，即可自动推导出子集类型
}

type IKey=keyof { a:string; b:number };

函数返回值类型

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

type IDelayCall = <T extends () => any>(func: T) => ReturnType<T>;

type IReturnType<T extends (...args: any) => any> = T extends (...args: any)=infer R ? R: any

//关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式
//如T===判断类型?类型A:类型B

//关键字【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型
//如该场景下，将函数的返回值类型作为变量，使用新泛型R表示，使用在类型推荐命中的结果中

TypeScript 工程应用

浏览器Web：webpack

配置webpack loader相关配置
配置tsconfig。js文件
运行webpack启动/打包
load处理ts文件时，会进行编译和类型检查