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

1.重点内容

TypeScript的发展历史
TypeScript的数据类型

2.详细知识

2.1 基本类型

2.1.1 基本数据类型

string,number, boolean, null, undefined, symbol, bigint

// 定义基本类型
 let num:number = 12

2.1.2 对象类型

// 定义一个对象类型
interface IBytedancer {
    // 只读属性
    readonly id: number
    name: string
    sex: 'man' | 'woman' | 'other'
    // 可选属性
    hbby?:string
    // 任意属性
    [key: string]: any 
}

//使用
const bytedancer: IBytedancer = {
    id: 12,
    name: 'hae',
    sex: 'woman',
    hbby: 'dre',
    tName: 'dd'
}

2.1.3 函数类型

两种声明方式

// 方式1：单独指定参数
function add(x:number, y:number):number {
    return x + y
}

// 方式2:同时指定参数
const add: (x:number, y:number)=>number = (x, y)=> {
    return x+y
}

2.1.4 数组类型

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

2.1.5 补充类型

// 空类型
type IEmptyFunction = () => void
// 任意类型
type IAnyType = any
// 枚举类型
enum EnumExample {
add = '+',
mult = '*'
}

2.1.6 泛型

// 泛型接口
interface IX<T, U> {
    key: T,
    val: U
}
//泛型类
class IMan<T> {
instance: T
}
// 泛型别名
type  ITypeArr<T> = Array<T>

泛型约束

我们可以给泛型添加约束,使他必须符合指定类型

// 泛型约束：限制泛型必须为string 或者number
type IGetRepeatStringArr = <T extends string | number>(target: T) => T[]
const getStrArr: IGetRepeatStringArr = (target) => new Array(100).fill(target)

getStrArr('ddd')
getStrArr(123)

// 泛型参数默认类型
type IGetRepeatArr<T = number | string> = (target: T) => T[]
const getRepeatArr: IGetRepeatArr = (target) => new Array(100).fill(target)
getRepeatArr('123')

2.2 高级数据类型

2.2.1联合/交叉类型

当我们需要为以下数据赋予类型时

const bookList: IBookList = [
  {
    author: 'xiaoming',
    type: 'history',
    range: '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>

这样定义，复杂而又繁琐，现在可以通过联合交叉类型定义

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

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

2.2.2 类型保护与类型守卫

当我们访问联合类型时，处于程序安全，仅能访问联合类中的交集部分,直接访问会报错，这时我们可以定义一个类型守卫

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 log(arg: IA | IB) {
  if (getIsIA(arg)) {
    console.log(arg.a1)
  } else {
    console.log(arg.b1)
  }
}

课后总结

感觉这一章很难，我需要花多一点的时间才能掌握，中间很多知识点，很多写法，都是我完全没有接触过的，还得更加努力学习才行

TypeScript | 青训营笔记