减速器中的打字稿类型问题

debugcn 发表于 Dev

克莱门特·蒙托瓦斯（Clement Montois）

我在类似函数的化简器中遇到一些类型错误（我的目标是能够使用状态中的formData生成表单）。

但是由于我的reducer函数中存在此错误，我在如何键入表单属性上感到挣扎：

  Index signatures are incompatible.
          Types of property 'initialValues' are incompatible.
            Type 'string' is not assignable to type 'number'.ts(2322)

码：

type Attribute = StringAttribute | DecimalAttribute;

enum Type {
    DECIMAL = 'decimal',
    STRING = 'string',
}

interface StringAttribute {
    isErrored: boolean;
    isMissingData: boolean;
    initialValues: string;
    values: string;
    attributeDefinition: {
        type: Type.STRING;
        helperText: string;
        label: string;
    }
}

const isStringAttribute = (attribute: Attribute): attribute is StringAttribute => attribute.attributeDefinition.type === Type.STRING;

interface DecimalAttribute {
    isErrored: boolean;
    isMissingData: boolean;
    initialValues: number;
    values: number;
    attributeDefinition: {
        type: Type.DECIMAL;
        helperText: string;
        label: string;
    }
}

const isDecimalAttribute = (attribute: Attribute): attribute is DecimalAttribute => attribute.attributeDefinition.type === Type.DECIMAL;

type Action =
| { type: 'updateStringValue', attributeIdentifier: string; value: string }
| { type: 'updateDecimalValue', attributeIdentifier: string; value: number }

interface State {
    formData: Record<string, Attribute>
}

const reducer = (state: State, action: Action): State => {
    switch (action.type) {
        case 'updateDecimalValue': {
            const attribute = state.formData[action.attributeIdentifier];
            if (isDecimalAttribute(attribute)) {
                return {
                    ...state,
                    formData: {
                        ...state.formData,
                        [action.attributeIdentifier]: {
                            ...state.formData[action.attributeIdentifier],
                            values: action.value
                        }
                    }
                }
            }

            return state;
        }
    }
}

const initialState: State = {
    formData: {
        stringAttributeIdentifier: {
            isErrored: false,
            isMissingData: false,
            values: 'String data',
            initialValues: 'String data',
            attributeDefinition: {
                type: Type.STRING,
                helperText: 'Some Helper Text',
                label: 'My Attribute Label'
            }
        },
        decimalAttributeIdentifier: {
            isErrored: false,
            isMissingData: false,
            values: 13.32,
            initialValues: 13.32,
            attributeDefinition: {
                type: Type.DECIMAL,
                helperText: 'Some Helper Text',
                label: 'My Attribute Label'
            }
        },
    }
}

托比亚斯弗里德

TypeScript不能使您从化简器的每个分支返回的内容具有适合您要执行的操作的形状。您可以提供帮助：

编辑编辑：您必须已经使用attributes通过类型防护的东西（）：

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'updateDecimalValue': {
      const attribute = state.formData[action.attributeIdentifier];
      if (isDecimalAttribute(attribute)) {
        return {
          ...state,
          formData: {
            ...state.formData,
            [action.attributeIdentifier]: {
              ...attribute,     // <---- THIS THING HAS PASSED THE TYPE GUARD
              values: action.value
            }
          }
        }
      }

      return state;
    }
    case "updateStringValue": {
      const attribute = state.formData[action.attributeIdentifier];
      if (isStringAttribute(attribute)) {
        return {
          ...state,
          formData: {
            ...state.formData,
            [action.attributeIdentifier]: {
              ...state.formData[action.attributeIdentifier], // <---- ERROR: THIS HASN'T
              values: action.value
            }    
          }
        }
      }
      return state;
    }
    default: throw new Error();
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。