TypeScript | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第5天。本文简要介绍了Typescript的

这是我参与「第四届青训营」笔记创作活动的第5天。

08 TypeScript

为什么要选择typescript？

JS是动态类型，弱类型语言；而TS是静态类型弱类型语言

(动态类型语言在执行时才进行(编译)类型匹配，而静态类型语言则会提前进行类型匹配

弱类型语言会隐式类型转换,而强类型语言则不会)

静态类型语言的可读性增强、可维护性增强，因此在多人合作的大型项目中可以获得更好的稳定性和开发效率

在此基础上，TS是JS的超集，包含于兼容所有JS特性，支持共存，支持渐进式引入与升级。

基本语法

基本类型

const q: string = 'lapi'
const w: number = 20
const e: boolean = true
const r: null = null
const t: undefined = undefined

对象类型

const obj: Obj = {
    jobId: 191910,
    name:'Lapi',
    sex:'man',
    age:20,
    hobby:'running'
}

interface Obj {
    /*只读属性：约束属性不可在对象初始化外赋值*/
    readonly jobId: number
    name: string
    sex: 'man'|'women'|'other'
    age: number
    /*可选属性：定义该属性可以不存在*/
    hobby?: string
    /*任意属性：约束所有对象属性都必须是该属性的子类型*/
    [key: string]: any
}

函数类型

function add(x: number,y: number): number{
    return x+y
}

const mult: (x: number,y: number) => number = (x,y) => x*y


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

函数重载

可以对函数类型进行多次声明以实现不同输入类型对于不同输出的类型

如下例：

编写一个生成时间函数，函数有一个参数type，若type为'date'，则返回值为一个Date对象；若type为'string'，则返回值为一个字符串。

另外函数有一个缺省值参数time，若这个参数存在则根据此参数构造时间，否则返回当前时间

function getDate(type: 'string',time?: string): string
function getDate(type: 'date',time?: string): Date
function getDate(type: 'string'|'date',time?: string): string|Date{
    const date = new Date(time)
    return type === 'string' ? date.toLocalString() : date
}

数组类型

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

const arr1: IArr1 = [1,2,3,4]
const arr2: IArr2 = [1,2,'3','4',{a: 1}]
const arr3: IArr3 = [1,2,'3','4']
const arr4: IArr4 = ['string',()=>null,{},[]]

TS补充类型

// 空类型
type IEmptyFunction = ()=> void
// 任意类型
type IAnyType = any
// 枚举类型:支持枚举值到枚举名的正反映射
enum Enum{
    add = '+',
    mult = '*'
}
// 泛型
type INumArr = Array<number>

泛型

不预先指定具体的类型，而在使用的时候再指定类型的一种特性

function getRepeatArr(target): IGetRepeatArrR {
    return new Array(100).fill(target)
}

type IGetRepeatArrR = <T>(target: T)=> T[]

//泛型约束
type IGet = <T extends string>(target: T)=> T[]  //将泛型限定在字符串内
//泛型参数默认类型
type IGet<T = number> = (target: T) => T[]

类型别名、类型断言

type IObj = Array<{
    key: string
    [objKey: string]: any
}>

//通过as关键字断言result类型为正确类型
function kb<T>(o: Array<T>){
    const result
    return result as Record<string,T>
}

字符串/数字字面量

允许指定字符串/数字必须的固定值

type IDomtag = 'html' | 'body' | 'div' | 'span'
type IOdd = 1 | 3 | 5 | 7 | 9

高级类型

联合/交叉类型

联合类型 IA | IB 表示一个值可以是几种类型之一

交叉类型 IA & IB 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型守卫

定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

function getIsIA(arg: IA | IB): arg is IA{
    return !!(arg as IA).a
}

TypeScript | 青训营笔记