TypeScript｜ 青训营笔记

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

什么是TypeScript？

• JavaScript动态类型：在执行阶段才确定类型的匹配
  弱类型语言：字符串1和数字1可以相加
• typescript静态类型：在执行之前匹配？
  强类型语言：两者不可相加

基本语法

const bytedancer: IBytedancer = {
jobId: 9303245,
name :'Lin',
sex:'man ',
age: 28 ,
hobby: ' swimming',
}
//interface接口，一般定义数据类型时会将其首字母大写，用来区分
interface IBytedancer {
/*只读属性:约束属性不可在对象初始化外赋值*/
readonly jobId: number ;
name: string;
sex:'man' | 'woman' | ' other' ;
age:number ;
/*可选属性:定义该属性可以不存在*/
hobby?: string;
/*任意属性:约束所有对象属性都必须是该属性的子类型*/
[kev: string]: any;

函数类型：

函数重载： 将IGetDate的函数类型大于匿名函数Date就可以通过，也就是IGetDate返回类型any

数组 第四项是任意类型的数组

泛型：不预先指定，根据传入数据进行设置 extends进行约束

类型别名type & 类型断言as

高级类型

1. 联合/交叉类型

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

使用联合/交叉类型：

2. 类型保护与类型守卫

//类型守卫，当return true时，返回类型谓词arg is IA
function getIsIA(arg:IA| IB): arg is IA {
    return !!(arg as IA).a;//当存在a时，断言arg是IA
}
function log2(arg: IA | IB) {
    if (getIsIA(arg)) {
        console. log(arg. a1)
    } else {
        console. log(arg.b1);
    }
}

如果他们有相同的部分，就更简单一些：

3. 高级类型（不懂）

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

• 关键字[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

工程应用

Web：

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

Node.js：

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