TypeScript在实际场景中的应用技巧

TypeScript在实际场景中的应用技巧

引用

CSDN

1.

https://blog.csdn.net/2402_85402030/article/details/139591795

TypeScript在实际开发中的应用远不止基础类型的学习。本文通过多个实际项目案例，展示了如何利用TypeScript的高级类型功能来优化代码结构，提高开发效率。无论是避免类型重复定义，还是组件封装，亦或是自定义类型检查，这些技巧都能帮助开发者更好地驾驭TypeScript。

避免类型的重复定义

在实际项目中，我们经常会遇到需要对同一数据结构在不同场景下定义不同类型的情况。TypeScript提供了一些内置类型工具，可以帮助我们更优雅地处理这类问题。

/** 定义基本的数据项 */
type Item = {
  id: number;
  name: string;
  age: string;
  address?: string;
};

/** 列表数据，泛型的基本用法，也可以Item[] */
type List = Array<Item>;

/** 新增时表单数据，无id，使用Omit移除属性 */
type FormDataAdd = Omit<Item, 'id'>;

/** 修改时表单数据，只可修改address，使用Pick挑选属性 */
type FormDataModify = Pick<Item, 'id' | 'address'>;

const data: Item = {
  id: 1,
  name: 'xx',
  age: 18,
  address: 'xxx',
};

/** 当确定address必有值，使用NonNullable转换一下 */
const addressMustExist = data.address as NonNullable<Item['address']>;

/** 或者使用非空断言 */
const addressMustExist1 = data.address!;

/** 查询参数，使用Partial将属性转为可选，使用&扩展属性 */
type Query = Partial<List> & {
  current: number;
  pageSize: number;
};

/** 定义一个通用的service，泛型T 表示数据项，U 表示查询参数 */
type Service<T, U> = (params: U) => Promise<{ data: T[]; totalItem: number; }>;

/** 运用 */
type PageService = Service<Item, Query>;

组件的二次封装

在React项目中，我们经常需要对第三方组件库（如Ant Design）进行二次封装，以满足特定业务需求。TypeScript的类型系统可以帮助我们更安全地进行这类封装。

import { Input, InputProps } from 'antd';
import { useMemo } from 'react';

interface IProps extends Omit<InputProps, 'disabled'> {
  myCustomProps?: string;
}

export default function MyInput(props: IProps) {
  const { myCustomProps, ...restInputProps } = props;
  const computedDisabled = useMemo(() => {
    if (myCustomProps === 'xxx') {
      return true;
    }
    return false;
  }, [myCustomProps]);

  return <Input {...restInputProps} disabled={computedDisabled} />;
}

字符串格式限制

有时候我们需要对字符串的格式进行限制，比如表示一个数值范围的字符串。TypeScript的模板字面量类型可以帮助我们实现这一点。

function range(num: number, interval: `${'[' | '('}${string}${')' | ']'}`) {
  // 实现省略...
}

ahooks的useAntdTable二次封装

ahooks的useAntdTable是一个非常实用的hook，但有时我们需要对service的返回格式进行适配。通过TypeScript的泛型和条件类型，我们可以优雅地处理这类问题。

import { useAntdTable } from 'ahooks';
import { AntdTableOptions, Data, Params } from 'ahooks/lib/useAntdTable/types';

/** 我们的返回数据类型 */
export type MyData = {
  success: boolean;
  data: {
    list: any[];
    totalItem: number;
  };
};

/** 我们的service入参 */
export type MyParams = {
  currentPage: number;
  pageSize: number;
  [key: string]: any;
};

/** 定义接受的service类型，extends关键词保证了service符合我们的定义约束 */
type MyService<TData extends MyData, TParams extends MyParams> = (args: TParams) => Promise<TData>;

/** 获取Promise的返回值类型，这里用到了infer，通常用来搭配泛型来获取某个具体的类型 */
type PromiseType<T> = T extends Promise<infer U> ? U : never;

/** 结合useAntdTable的类型定义，来修改我们要的类型 */
function useDrsAntdTable<TData extends MyData, TParams extends MyParams>(
  service: MyService<TData, TParams>,
  options: AntdTableOptions<Data, Params> = {},
) {
  type returnType = PromiseType<ReturnType<typeof service>>;

  /** 
   * 我们需要把对应类型也做转换，手动赋给useAntdTable的泛型参数，让TS识别到
   * 通常使用useAntdTable时并不需要指定这个泛型，是因为TS可以从service中推断出来
   */
  type TransformData = {
    list: returnType['data']['list'];
    total: number;
  };

  const hooks = useAntdTable<TransformData, Params>(async ({ current, pageSize }, params) => {
    const { data } = await service({
      currentPage: current,
      pageSize,
      ...params,
    });
    return {
      total: data.totalItem,
      list: data.list,
    };
  }, options);

  return hooks;
}

export default useDrsAntdTable;

使用封装后的hook，代码会简洁很多，同时dataSource的类型也能得到正确的提示：