如何使这个 TypeScript 代码干燥（不要重复自己）？

Question

下面是从我正在开发的 Redux 减速器中提取的一些 TypeScript 代码的片段。它有效，但它肯定是冗长的。必须有更好的方法来做到这一点，对吧？

  switch (iterationNum) {
    case 1:
      state.iteration1Result = action.payload;
      break;
    case 2:
      state.iteration2Result = action.payload;
      break;
    case 3:
      state.iteration3Result = action.payload;
      break;
    case 4:
      state.iteration4Result = action.payload;
      break;
    case 5:
      state.iteration5Result = action.payload;
      break;
    case 6:
      state.iteration6Result = action.payload;
      break;
    case 7:
      state.iteration7Result = action.payload;
      break;
    case 8:
      state.iteration8Result = action.payload;
      break;
  }

下面是状态的定义：

interface InitialState {
  iteration1Result: IterationResult;
  iteration2Result: IterationResult;
  iteration3Result: IterationResult;
  ..., etc.
}

我天真地希望我能做这样的事情

state[`iteration${iterationNum}result`] = action.payload;

但我收到此错误：

Element implicitly has an 'any' type because expression of type '`iteration${number}Result`' can't be used to index type 'WritableDraft<TestStartActivity>'.ts(7053)

Answer 1

不要使用switch，使用iterationNum 使用括号表示法来提出要分配的属性。使用模板文字构造属性名称，以便 TypeScript 可以正确解释它。

假设iterationNum是1 | 2 | 3 | 4 | 5 | 6 | 7 | 8，你可以这样做

state[`iteration${iterationNum}Result`] = action.payload;

如果您必须首先缩小 iterationNum... 在 JavaScript 中，您将使用 .includes 进行检查，但那是 not really possible in a neat way in TypeScript（由于可以说是一个错误的行为）。要么做

if (iterationNum === 1 || iterationNum === 2 // etc

或

const nums = [1, 2, 3] as const; // etc
type Num = (typeof nums)[number];
if (nums.includes(iterationNum as Num)) {
    state[`iteration${iterationNum as Num}Result`] = action.payload;
}