[前端与HTML]

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

前言

1. TypeScript的高级类型
2. TypeScript的工程应用

1.TypeScript的高级类型

联合/交叉类型：

书籍列表编写类型：
const bookList=[{
    author:'xiaoming',
    type:'history',
    rang:'2001-2021',
    )],(
    author:'xiaoli',
    type:'story',
    theme:'love',
)]
 ===>类型声明繁琐，存在较多重复
  interface IHistoryBook{
    author:string;
    type:string;
    range:string
    }
    interface IStoryBook{
    author:string;
    type:string;
    theme:string;
    }
    type IBookList=Array<IHistoryBook | IStoryBook>;
           

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

        const bookList=[{        author:'xiaoming',        type:'history',        rang:'2001-2021',        )],(
        author:'xiaoli',
        type:'story',
        theme:'love',
    )]

        tyoe IBookList=Array<{
            author:string;
                               }&({
            type:'history';
            range:string;
                               } | {
            type:'story';
            theme:string;
                               })>

类型保护与类型守卫：

        interface IA{a:1,a1:2}
        
        interface IB{b:1,b1:2}
        
        /*类型守卫：定义一个函数，他的返回值是一个类型谓词，生效范围为子作用域*/
        function getIsIA(arg:IA | IB): arg is IA{
        return !!(arg as IA)a;
        )
        
        function log2(arg:IA | IB){
        if(getIsIA(arg)){
        console.log(arg.a1)
        }
        else{
        console.log(arg.b1);
        }
       }

        //实现函数reverse
        //实现函数logBook类型
        //函数接收书本类型，并logger出相关特征
        function logBook(book: IBookItem){
        //联合类型+类型保护=自动类型推断
        if(book.type==='history'){
        console.log(book.range)
        }
        else{
        console.log(book.theme);
        }
        }

高级类型：

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

        interface ISourceObj{
        x?:string;
        y?:string;
        }
        interface ITargetObj{
        x:string;
        y:string
        }
        type IMerge=(sourceObj:ISourceObj;targetObj:ITargetObj)=>ITargetObj;
        /**
        *类型实现繁琐：若obj类型较为复杂，则声明source和target便需要大量重复2遍
        *容易出错：若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 IKkeys="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表示，使用在类型推荐命中的结果中

2.TypeScript的工程应用-Web:

1. 配置webapack loader相关配置
2. 配置tsconfig.js文件
3. 运行webpack启动/打包
4. loader处理ts文件时，会进行编译与类型检查

3.TypeScript的工程应用-Node:

1. 安装Node与npm
2. 配置tsconfig.js文件
3. 使用npm安装tsc
4. 使用tsc运行编译得到js文件