TypeScript: как создать типовой объект?
У меня следующие интерфейсы:
interface AppState {
readonly grid : IGridSettings;
readonly selected : ISelectedSettings;
}
interface IGridSettings {
readonly extents : number;
readonly isXY : boolean;
readonly isXZ : boolean;
readonly isYZ : boolean;
readonly spacing : number;
}
interface ISelectedSettings {
readonly bodyColor : number;
readonly colorGlow : number;
readonly lineColor : number;
readonly selection : number[] | undefined;
}
interface Action<T = any> {
type: T
}
interface SetPropertyValueAction<KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]> extends Action {
type : string;
payload : {
property : [KAction, KActionProp];
value : IUserActions[KAction][KActionProp];
};
}
В конце концов, мой редуктор redux вызывается при запуске функции setPropertyValue:
const setPropertyValue = <KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]>( property : [KAction, KActionProp], value : AppState[KAction][KActionProp] ) : SetPropertyValueAction<KAction, KActionProp> => ( {
type: 'SET_PROPERTY_VALUE',
payload: {
property,
value,
}
} );
function myReducer( state : AppState = INITIAL_STATE, a : Action ) : AppState {
switch( a.type ) {
case 'SET_PROPERTY_VALUE': {
const action = a as SetPropertyValueAction; // <- error here
return createNewState( state, action.payload.property, action.payload.value );
}
}
return states;
}
Проблема в том, что я не знаю, как исправить приведение Action к SetPropertyValueAction. TypeScript сообщает мне, что ошибка:
Generic type 'SetPropertyValueAction<KAction, KActionProp>' requires 2 type argument(s).
Я попытался изменить строку кода с ошибкой на следующее:
const action = a as SetPropertyValueAction<KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]>;
... но это дает мне две ошибки: "Не удается найти имя KAction и KActionProp"
Как я могу преобразовать объект Action в общий SetPropertyValueAction ??
Это следующий вопрос к моему другому вопросу, на который был дан ответ здесь: Как добавить безопасность типа TypeScript в мое действие redux?
Ответы 1
Нам нужно указать параметры типа для типа. Поскольку мы их на самом деле не знаем, нам нужно что-то, что совместимо с keyof T, но не является фактическим ключом T. unknown не подойдет, поскольку он не удовлетворяет ограничению, мы можем использовать один тип, это any или never (который является подтипом любого типа)
interface AppState {
readonly grid: IGridSettings;
readonly selected: ISelectedSettings;
}
interface IGridSettings {
readonly extents: number;
readonly isXY: boolean;
readonly isXZ: boolean;
readonly isYZ: boolean;
readonly spacing: number;
}
interface ISelectedSettings {
readonly bodyColor: number;
readonly colorGlow: number;
readonly lineColor: number;
readonly selection: number[] | undefined;
}
interface Action<T = any> {
type: T
}
interface SetPropertyValueAction<KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]> extends Action {
type: string;
payload: {
property: [KAction, KActionProp];
value: AppState[KAction][KActionProp];
};
}
const setPropertyValue = <KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]>(property: [KAction, KActionProp], value: AppState[KAction][KActionProp]): SetPropertyValueAction<KAction, KActionProp> => ({
type: 'SET_PROPERTY_VALUE',
payload: {
property,
value,
}
});
declare const INITIAL_STATE: AppState;
// implementation if necessary
function createNewState<KAction extends keyof AppState, KActionProp extends keyof AppState[KAction]>(state: AppState, property: [KAction, KActionProp], value: AppState[KAction][KActionProp]): AppState {
return Object.assign({ ...state }, {
[property[0]]: Object.assign({ ...state[property[0]] }, {
[property[1]]: value,
})
});
}
function myReducer(state: AppState = INITIAL_STATE, a: Action): AppState {
switch (a.type) {
case 'SET_PROPERTY_VALUE': {
const action = a as SetPropertyValueAction<never, never>; // we don't know the actual type, never will have to do
return createNewState(state, action.payload.property, action.payload.value);
}
}
return state;
}
Если я хочу использовать такую функцию setPropertyValue: setPropertyValue (свойство, 10);, как мне объявить переменную свойства, чтобы она была безопасной по типу, а среда IDE могла дать мне правильные подсказки по автозаполнению, когда я заполняю ее значениями. прямо сейчас у меня есть: const property = ['сетка', 'интервал'];, для которого TypeScript выдает ошибку, поскольку тип нить[] not <KAction extends keyof AppState, KActionProp extends keyof AppState [KAction]>
@ MarekKnows.com константа не сохраняет строковые литералы. для этого используйте здесь тип tuple: stackoverflow.com/questions/54070785/…
Я тоже надеялся, что это сработает, но это не так. свойство const: Array <KAction extends keyof AppState, KActionProp extends keyof AppState [KAction]> = ['grid', 'spacing'];
@ MarekKnows.com Нет никакого способа сделать это, такое же объяснение, как здесь: stackoverflow.com/questions/54055578/…
Вы можете подписаться на эту статью: medium.com/@martin_hotell/…