Typescript|青训营笔记

lzzt
58 阅读1分钟

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

typescript

TypeScript是JavaScript 的语法超集，它添加了静态类型，近几年的发展中，也受到诸多开发者的喜爱。Typescript 的社区逐渐壮大，日趋完善。

typescript基础数据类型

const q:string = 'string';
const w:numver = 1;
const e:boolean = true;
const r:null = null;
const t:undefined = undefined

typescript对象类型

interface Text{
    //只读属性
    readonly jobId:number;
    name:string;
    sex:'man' | 'woman' | 'other';
    age:number;
    //可选属性
    hobby?:string;
    //任意属性
    [key:string]:any;
}

typescript函数类型

interface IMult{
    (x:number,y:number):number;
}
const mult:IMult = (x,y)=> x*y;

typescript函数重载

image.png

typescript数组类型

  • 类型+方括号 type IArr1 = number[]
  • 泛型表示 type IArr2 = Array<string|number|Record<string,number>>
  • 元祖表示 type IArr3 = [number,number,string,string]
  • 接口表示 interface IArr4{[key:number]:any}

typescript补充类型

typescript泛型

类型别名&类型断言

image.png

联合/交叉类型

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

image.png

类型保护与类型守卫

类型保护 image.png 类型守卫 image.png

函数返回值类型

  • 关键字extends 跟随泛型出现时，表示类型推断，其表达可类比三元表达式 如 T===判断类型？类型A：类型B
    type IDelayCall = <T extends () => any>(func: T) =>ReturnType<T>
  • 关键字infer 出现在类型推荐中，表示定义类型变量，可以用于指代类型
    type IReturnType<T extends(...args:any)=>any>=T extends (...args:any)=>infer R ? :any

工程应用

webpack

  • 配置webpack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时，会进行编译与类型检查
avatar
文章
阅读
粉丝