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

TypeScript 提供了一些高级数据类型来扩展基本数据类型，这些数据类型可以让我们更轻松地处理复杂的数据结构。

联合/交叉类型

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

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

类型保护与类型守卫

TypeScript的类型保护和类型守卫是用来在代码中对类型进行检查和保护的机制。类型保护是一种在运行时检查变量类型的技术，而类型守卫则是一种在编译时检查变量类型的技术。

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);
    }
}

Merge函数类型实现

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

function merge2(source0bj, target0bj) {
    return { ...source0bj, ...target0bj };
}

函数返回值类型

关键字extends跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T===判断类型?类型A:类型B 关键字infer出现在类型推荐中，表示定义类型变量，可以用于指代类型。如该场景下，将函数的返回值类型作为变量，使用新泛型R表示，使用在类型推荐命中的结果中。

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

TypeScript工程应用

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

相关loader

• awesome-typescript-loader
• babel-loader

使用TSC编译

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