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

TypeScript学习|青训营笔记

为什么学，什么是TypeScript

TypeScript 与JavaScript

JS:动态类型，弱类型语言

TS:静态类型，弱类型语言

动态与动态区别：编译发生在执行前还是执行后。执行前是静态，执行后是动态。

TS特点

静态类型

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

在多人合作的大型项目中，获取更好的稳定性和开发效率

JS的超集

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

编辑器推荐

Visual Studio Code & 官网在线编辑器

TS基本语法

数据类型

对象类型：

函数类型：

函数重载：

数组类型：

TS补充类型：

TS泛型：

类型别名&类型断言：

字符串/数字字面量

高级类型

联合/交叉类型

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

const bookList=[{
    author:'xiaoming',
    type:'history',
    range:'2001-2021',
},{
    author:'xiaoli',
    type:'story',
    theme:'love',
}];
type IBookList=Array<{
    author:string;
}&({
    type:'history';
    range:string
} |{
    type:'story';
    theme:string;
})
>

类型保护与类型守卫

interface IA{a:1,a1:2}
interface IB{b:1,b1:2}
// 报错：类型 ”IA | IB“上不存在属性a。
// 结论：访问联合类型时，出于程序安全，仅能访问联合类型中的交集部分
function log(arg:IA|IB){
    if(atg.a){
        console.log(arg.a1);
    }else{
        console.log(arg.b1);
    }
}

//联合类型+类型保护 = 自动类型推断

merge函数类型

// 实现merge函数类型
// 要求sourceObj为targetObj的子集
function merge(sourceObj,targetObj){
    const result={...sourceObj};
    for(let key in targetObj){
        const itemVal=sourceObj[key];
        itemVal && (result[key]=itemVal);
    }
    return result;
}
interface ISourceObj{
    x:string;
    y:string;
}
interface ITargetObj{
    x:string;
    y:string;
}
type IMerge = (SourceObj: ISourceObj,targetObj:ITargetObj) => ITargetObj;
// 类型实现繁琐：若obj类较为复杂，则声明source和target便需要大量重复
// 容易出错：若target增加/减少key，则需要source联动去除

改进：

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

函数返回值类型

// 实现函数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表示，使用在类型推荐命中的结果中

TS工程应用

浏览器Web与node.js

个人总结

今天学习了TypeScript的相关知识，了解了其一些内容及存在意义，尤其是与JS的比较。我学习到了到TS算是对JS的另一种加强补充，作为强类型语言，TS解决了JS在大型项目代码的复杂性问题，使得代码更加规范。