Question

我正在用TypeScript编写应用程序，并在使用Redux跟踪应用程序状态。我的redux存储状态看起来像这样：

interface AppState {
  readonly grid : IGridSettings;
  readonly selected : ISelectedSettings;
  [key : string] : IGridSettings | ISelectedSettings;
}

interface IGridSettings {
  readonly extents : number;
  readonly isXY : boolean;
  readonly isXZ : boolean;
  readonly isYZ : boolean;
  readonly spacing : number;
  [key : string] : number | boolean;
}

interface ISelectedSettings {
  readonly bodyColor : number;
  readonly colorGlow : number;
  readonly lineColor : number;
  readonly selection : number[] | undefined;
  [key : string] : number | number[] | undefined;
}

我创建了以下操作来更新商店，但 setPropertyValue 函数并不理想，因为它没有类型安全性！

//How to add type safety to this function?
const setPropertyValue = ( property : string[], value : any ) : SetPropertyValueAction => ( {
  type: 'SET_PROPERTY_VALUE',
  payload: {
    property,
    value,
  }
} );

interface SetPropertyValueAction extends Action {
  type : string;
  payload : {
    property : string[];
    value : any;
  };
}

我可以通过以下方式在代码中使用此操作：

setPropertyValue( ['grid', 'extents'], 100 );

这可行，但是由于setPropertyValue函数中没有类型安全性，因此没有什么限制我将无效值输入这样的函数中：

setPropertyValue( ['grid', 'size'], 100 ); //invalid since IGridSettings doesn't have a 'size' property
setPropertyValue( ['grid', 'isXY'], -1 ); //value should be a boolean not a number
setPropertyValue( ['selected', 'bodyColor'], '255' ); //value should be a number not a string

是否可以重写setPropertyValue函数，使其仅接受对在 AppState 中找到的属性名称有效的参数。另外，传入的值必须与所选属性的正确类型相对应。

也许使用字符串数组来更改属性并不理想，但我不知道有一种更好的方法来仅定位AppState中可用的属性。

Answer 1

如果需要索引签名，则无法验证类型的键（因为所有索引签名都意味着该类可被任何键索引，所以任何键都是有效的）

要验证字符串是否是某种类型的键，我们可以使用keyof运算符，并结合一些通用类型参数（以捕获传入的实际键）

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;
}

const setPropertyValue = <KApp extends keyof AppState, KAppProp extends keyof AppState[KApp]>( property : [KApp, KAppProp], value : AppState[KApp][KAppProp] ) : SetPropertyValueAction => ( {
  type: 'SET_PROPERTY_VALUE',
  payload: {
    property,
    value,
  }
} );

interface SetPropertyValueAction {
  type : string;
  payload : {
    property : PropertyKey[];
    value : any;
  };
}

setPropertyValue( ['grid', 'extents'], 100 );
setPropertyValue( ['grid', 'size'], 100 ); //err
setPropertyValue( ['grid', 'isXY'], -1 ); //err
setPropertyValue( ['selected', 'bodyColor'], '255' );// err

如何为我的redux操作添加TypeScript类型安全？

1 个答案: