TypeScript 开发中的小技巧（一）

一、定义实体类型并使用

我们创建一个文件夹types或interfaces，用来存放根据数据字典定义对应的实体类型，比如用户、产品、汽车等。

同时创建一个文件enums.ts，用来存放定义特定的枚举类型，比如性别类型（男、女、保密），用户类型（超级管理员、管理员、普通用户），发票类型（增值税普通发票、增值税专用发票）等等。

types/interface 文件夹
  --user.ts
  --product.ts
  --car.ts
  --enums.ts
  --...

// enums.ts
/** 用户角色 **/
export enum Role {
	SuperAdmin = 1,		// 超级管理员
	Admin = 2,			// 管理员
	Normal = 3			// 普通用户
}
export type RoleType = 1 | 2 | 3
/** 用户性别 **/
export enum Sex {
	Male = '男',
	Female = '女',
	Secret = '保密'
}
export type SexType = '男' | '女' | '保密'
// ...

// user.ts
import { RoleType, SexType } from './enums'
export interface User {
	name: string,
	age: number,
	sex: SexType ,
	userType: RoleType,
	[key: string]: any    // 上面只定义我们需要用到的字段（name,age,sex,userType），由于后端返回的字段包含其他字段，所以我们需要这样处理
}

如何使用呢？假如后端返回一个用户列表

import { Role } from '../types/enums'
const userList: User[] = [
	{
		name: '诸葛亮',
		age: 18,
		sex: '男',
		userType: 1,
		otherProp: '写代码',
	},
]
const currUser: User = userList[0]
// 利用枚举处理特定的情况，解决硬编码问题
if (currUser === Role.SuperAdmin) { ... }

二、定义具体的对象类型

如果我们已经确定某对象具体的键和值，并且需要编译器提供类型识别，此时不要再傻傻用any或Object了，我们可以使用Record。Record后面的泛型就是对象键和值的类型。

比如我需要一个对象，有 ABC 三个属性，属性的值必须是数字，那么就这么写：

type key = 'A' | 'B' | 'C'
const result: Record<key, number> = {
	A: 1,
	B: 2,
	C: 3,
}

日常开发中，我们可以这么定义下拉框选项对象

type OptionKey = 'label' | 'value'
const options: Record<OptionKey, string | number>[] = [
      {
        label: '选项一',
        value: 1,
      },
      {
        label: '选项二',
        value: 2,
      },
      {
        label: '选项三',
        value: 3,
      },
]

三、DOM元素的类型

我们在获取DOM标签时，定义类型时不要再傻傻用any，其实每个DOM标签都继承HTMLElement类，不同DOM标签对应不同的类型，例如div标签的类型是HTMLDivElement、span标签的类型是HTMLSpanElement、canvas标签的类型是HTMLCanvasElement等。

const div1: HTMLElement = null
const div2: HTMLDivElement = null

一定要给DOM类型，这样才能获得代码提示

四、函数传参解构赋值

	const user = {
		name: '诸葛亮',
		age: 18,
		friends: [{name: '刘备', sex: '男'}, {name: '关羽', sex: '保密'}],
	}
	interface Friend {
		name: string,
		sex: string,
	}
	function handleUser({friends}: {friends: Friend[]}) {}