Типизация свойства объекта в виде строки27.11.2024 10:00

Введение

Все так или иначе сталкивались с функцией или методом, который принимает объект и свойства в виде строки с которым нужно что-то сделать. Пример:

updateDate(user, "date");

И когда изменяется свойства объекта (user.date → user.birthday), компилятор его нормально скомпилирует и мы лишаемся возможности отловить баг на стадий разработки.

Проблема

Что в рабочих, что в пет-проектах, использую библиотеку Element plus. У него есть компонент ElTable c атрибутом date, принимающий список объектов, для отображение и slot принимающее компоненты ElTableColumn, отображающее колонки, который имеет атрибут prop, принимает в виде строки свойства поля, который нужно отобразит.

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

В начале разработки и особенно когда бизнес требование не совсем прозрачны, объекты могут меняться несколько раз в день.

Решение проблемы

Для запуска типизации, создадим простую функцию, который будет принимать обобщенный тип, где и будет происходит проверка.

export function validatePath(path: ValidPath): ValidPath {
  /**
   * валидацию пути объекта
   */
  return path;
}

Как нетрудно догадаться, функция принимает строку и его же возвращает, что делает его практической бесплатной в виде затрат на ресурсы, а все проверки будут происходит на этапе компиляции.

Давайте опишем тип ValidPath:

export type ValidPath = T extends object
  ? {
      [K in keyof T & (string | number)]: `${K}` | `${K}.${ValidPath}`
    }[keyof T & string]
  : never

В начале, если это объект, то он возвращает всевозможные строковые ключи, в ином случай, он ничего не возвращает. Это нужно для разрешение рекурсий.

[K in keyof T & (string | number)] — идет перебор всех свойств, который является строкой или числом.

`${K}` | `${K}.${ValidPath}`;

Тут самое интересное. Он возвращает свойства в виде строки и рекурсивно вызывает себя, который возвращает все свойства объекта, но уже с префиксам.

Если, в рекурсивный тип

{ [K in keyof T & (string | number)]: `${K}` | `${K}.${ValidPath}`}

мы передадим

type T = {
  user: {
    name: string;
    age: number;
  };
};

для него будет получен промежуточный объект:

{
  id: "id";
  user: "user" | "user.name" | "user.age";
}

Далее, мы получем все свойства: [keyof T & string] получая по итогу тип:

"id" | "user" | "user.name" | "user.age"

Запустив функцию мы получаем:

Все работает, но постойте, нам нужны лишь свойства, а туда еще и попали функции. Для исправление создадим тип, который будет исключать все функции:

type PropertiesOnly = Pick<
  T,
  {
    [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K;
  }[keyof T]
>;

И внедряем в наш рекурсивный тип:

export type ValidPath = T extends object
  ? {
      [K in keyof PropertiesOnly & (string | number)]:
        | `${K}`
        | `${K}.${ValidPath}`;
    }[keyof PropertiesOnly & string]
  : never;

Думаете на этом все? Как бы не так. Для сложных типов он выдает ошибку:

error TS2590: Expression produces a union type that is too complex to represent

Это происходит из-за того, что он не может нормально обработать объекты внутри массивов. Так что мы просто берем и исключаем их:

type IsArray = T extends (infer U)[] ? true : false

export type ValidPath = T extends object
  ? {
      [K in keyof PropertiesOnly & (string | number)]: IsArray extends true
        ? never
        : `${K}` | `${K}.${ValidPath}`
    }[keyof PropertiesOnly & string]
  : never

На этом все.

Итоговый код

type PropertiesOnly = Pick<
  T,
  {
    [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K
  }[keyof T]
>

type IsArray = T extends (infer U)[] ? true : false

export type ValidPath = T extends object
  ? {
      [K in keyof PropertiesOnly & (string | number)]: IsArray extends true
        ? never
        : `${K}` | `${K}.${ValidPath}`
    }[keyof PropertiesOnly & string]
  : never

export function validatePath(path: ValidPath): ValidPath {
  /**
   * валидацию пути объекта
   */
  return path
}

Дополнение

Тип ValidPath, можно использовать для разных функции, что мне недавно пригодилось:

function floatHandler(value: string, row: any, property: ValidPath, propertyRaw: string)
{
  /*code*/
}

floatHandler<(typeof data)[0]>(value, scope.row, 'quantity', 'quantityRaw')

© Habrahabr.ru