При использовании UI-Router с React (и, возможно, Angular, хотя мой опыт здесь ограничен) можно ли убедиться, что разрешенные значения являются правильными типами, которые ожидает компонент?
Например, с компонентом и состоянием вроде этого:
type CompProps = {
name: string;
age: number;
};
const ExampleComponent: React.FunctionComponent<CompProps> = ({ name, age }) => {
return (
<div>
<p>Example state</p>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
};
interface CustomStateDeclaration<T = Record<string, unknown>> extends ReactStateDeclaration {
component: React.FunctionComponent<T>;
}
const exampleStateDefinition: CustomStateDeclaration<CompProps> = {
name: 'example.state',
url: '/:name/:age',
component: ExampleComponent,
resolve: [
{
token: 'age' as const,
deps: [Transition],
resolveFn: (trans: Transition) => trans.params<CompProps>().age,
},
{
token: 'name' as const,
deps: [Transition],
resolveFn: (trans: Transition) => trans.params<CompProps>().name,
},
],
};
Это возможно:
- Убедитесь, что значения разрешения имеют правильные типы без необходимости дублировать определения типов (т.е. каким-то образом с использованием
CompProps) - Убедитесь, что ВСЕ требуемые свойства действительно определены?
Одна кроличья нора, в которую я рискнул, пытается определить, могу ли я расширить поле ReactStateDeclaration resolve, чтобы использовать Component's Prop Types, но лучшее решение, которое я придумал до сих пор:
type ResolveableType<Props> = {
token: keyof Props;
resolveFn: (...args: any[]) => Props[keyof Props];
}
interface CustomStateDeclaration<T = Record<string, unknown>> extends ReactStateDeclaration {
component: React.FunctionComponent<T>;
resolve?: ResolveableType<T>[];
}
Но это просто гарантирует, что token и возврат resolveFn будут любыми свойствами и типом типа (т.е. token: 'name' будет работать с resolveFn: ()=>number).
Покопавшись с этим некоторое время, я подумал, что это может быть невозможно, по крайней мере, без большого количества дублирования типов (что, как я считаю, делает эту проверку типов в любом случае бесполезной). Я также думаю, что мне может не хватать более широкого подхода, поэтому любые предложения по альтернативным подходам были бы очень признательны.
