聊聊TypeScript类型声明那些最佳实践

const helloWorld = 'Hello World'  // 此时helloWorld的类型自动推导为string

const helloWorld = { first: 'Hello', last: 'World' } // 此时helloWorld的类型自动推导为object，无法约束对象内部的数据类型

// 通过自定义类型来约束
interface IHelloWorld {
  first: string
  last: string
}
const helloWorld: IHelloWorld = { first: 'Hello', last: 'World' }

type IWeather = 'sunny' | 'cloudy' | 'snowy'

type myArray = Array // 没有泛型约束的数组可以包含任何类型

// 通过泛型约束的数组只能包含指定的类型
type StringArray = Array<string> // 字符串数组
type NumberArray = Array<number> // 数字数组
type ObjectWithNameArray = Array<{ name: string }> // 自定义对象的数组

interface Backpack<T> {
  add: (obj: T) => void
  get: () => T
}
declare const backpack: Backpack<string>
console.log(backpack.get()) // 打印出 “string”

interface Point {
  x: number
  y: number
}

interface Rect {
  x: number
  y: number
  width: number
  height: number
}

function logPoint(p: Point) {
  console.log(p)
}
const point: Point = { x: 1, y: 2 }
const rect: Rect = { x:3, y: 3, width: 30, height: 50 }

logPoint(point) // 类型检查通过
logPoint(rect) // 类型检查也通过，因为Rect具有Point相同的结构，从感官上说就是React继承了Point的结构

// 声明基本数据类型别名
type NewString = string

// 声明联合类型
interface Bird {
  fly(): void
  layEggs(): boolean
}
interface Fish {
  swim(): void
  layEggs(): boolean
}
type SmallPet = Bird | Fish

// 声明元组
type SmallPetList = [Bird, Fish]

interface Bird {
  fly(): void
  layEggs(): boolean
}
interface Fish {
  swim(): void
  layEggs(): boolean
}
// 获得小宠物，这里认为不能够下蛋的宠物是小宠物。现实中的逻辑有点牵强，只是举个例子。
function getSmallPet(...animals: Array<Fish | Bird>): Fish | Bird {
  for (const animal of animals) {
    if (!animal.layEggs())
      return animal
  }
  return animals[0]
}

let pet = getSmallPet()
pet.layEggs() // okay 因为layEggs是Fish | Bird 共有的方法
pet.swim() // errors 因为swim是Fish的方法，而这里可能不存在

// 将共有的layEggs抽象到Eggable接口
interface Eggable {
  layEggs(): boolean
}

interface Bird extends Eggable {
  fly(): void
}
  
interface Fish extends Eggable {
  swim(): void
}
  
function getSmallPet<T extends Eggable>(...animals: Array<T>): T {
  for (const animal of animals) {
    if (!animal.layEggs()) return animal
  }
  return animals[0]
}
  
let pet = getSmallPet<Fish>()
pet.layEggs()
pet.swim()

// 声明模块的初始state
const userInitState = {
  name: '',
  workid: '',
  avator: '',
  department: '',
}

// 根据初始state推导出当前模块的数据结构
export type IUserStateMode = typeof userInitState // 导出的数据类型可以在其他地方使用