Типизация свойства объекта в виде строки
Введение
Все так или иначе сталкивались с функцией или методом, который принимает объект и свойства в виде строки с которым нужно что-то сделать. Пример:
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')