Введение

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

updateDate(user, "date");

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

Проблема

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

<el-table :data="tableData">
  <el-table-column prop="date" label="Date" />
  <el-table-column prop="name" label="Name" />
  <el-table-column prop="address" label="Address" />
</el-table>

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<T>(path: ValidPath<T>): ValidPath<T> {
  /**
   * валидацию пути объекта
   */
  return path;
}

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

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

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

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

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

`${K}` | `${K}.${ValidPath<T[K], `${Prefix}${K}.`>}`;

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

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

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

мы передадим

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<T> = Pick<
  T,
  {
    [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K;
  }[keyof T]
>;

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

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

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

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

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

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

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

На этом все.

Итоговый код

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

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

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

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

Дополнение

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

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

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