typeScript 最佳实践

TypeScript 类型即文档

• readonly 标记这个属性为只读

interface {
  readonly name: string;
}

• 当你不确定某个变量的具体类型，但能确定它不是原始类型，可以使用 object。但我更推荐进一步区分，也就是使用 Record<string, unknown> 或 Record<string, any> 表示对象，unknown[] 或 any[] 表示数组，(...args: any[]) => any 表示函数这样

• 响应的消息结构定义

// 联合类型加上字面量类型
interface Res {
  code: 10000 | 10001 | 50000;
  status: "success" | "fail";
  data: any;
}

// 通过类型别名来复用一组字面量联合类型
type Code = 10000 | 10001 | 50000;
type Status = "success" | "fail";

• 枚举

enum Status {
  success = "成功",
  fail = "失败",
}

const successText = Status.success;

• 索引签名类型

// 为内部属性较多的对象声明一个 any 的索引签名类型，以此来暂时支持对类型未明确属性的访问
interface AnyTypeHere {
  [key: string]: any;
}

• 泛型

我们为函数声明了一个泛型参数 T，并将参数的类型与返回值类型指向这个泛型参数。这样，在这个函数接收到参数时，T 会自动地被填充为这个参数的类型。这也就意味着你不再需要预先确定参数的可能类型了，而在返回值与参数类型关联的情况下，也可以通过泛型参数来进行运算。

function handle<T>(input: T): T {}

function swap<T, U>([start, end]: [T, U]): [U, T] {
  return [end, start];
}

//handle 函数拆分，不再处理对象类型的情况
function handle<T extends string | number>(input: T): T {}

• Pick\Omit

  • Pick 是保留这些传入的键，比如从一个庞大的结构中选择少数字段保留，需要的是这些少数字段。
  • Omit 则是移除这些传入的键，也就是从一个庞大的结构中剔除少数字段，需要的是剩余的多数部分。

• react 内置的类型定义

import type { ChangeEvent, MouseEvent, CSSProperties } from "react";

export interface IContainerProps {
  style: CSSProperties;
}

const css: CSSProperties = {
  display: "flex",
  alignContent: "center",
  justifyContent: "center",
};

const Container = () => {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {};

  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {};

  return (
    <>
      <input onChange={handleChange} />
      <button onClick={handleClick}>Click me!</button>
    </>
  );
};

• interface 与 type 异同点

  • 使用 interface 来定义对象类型，使用类型别名来处理函数签名、联合类型、工具类型等等。
  • interface 就是描述对象对外暴露的接口，其不应该具有过于复杂的类型逻辑，最多局限于泛型约束与索引类型这个层面。- type alias 就是用于将一组类型的重命名，或是对类型进行复杂编程。