Javascript TypeScript中的条件泛型类型使用区分并集

我的代码中有两个接口，我想在这两个接口之间选择一种类型

以下是接口的代码：

interface createUserToSiteMutateUseStates {
  setStateId: (value: React.SetStateAction<string | null | undefined>) => void;
  StateId: string | null | undefined;
  setCityId: (value: React.SetStateAction<string | null | undefined>) => void;
}

interface updateStoreSpatialCommitmentsVariablesUseState {
  setStateSelected: (
    value: React.SetStateAction<SelectorOptions[] | undefined | null>
  ) => void;
}

但是，当我使用

道具时，我会出现以下错误：

const handleChange = (option: SelectorOptions) => {
      switch (type) {
        case "createUserToSiteMutate":
          useStateProps!.setCityId && useStateProps!.setCityId(null);
          useStateProps!.setUniversityId &&
            useStateProps!.setUniversityId(null);
          useStateProps!.setOrganizationId &&
            useStateProps!.setOrganizationId(null);
          useStateProps!.setUnitId && useStateProps!.setUnitId(null);
          useStateProps!.setStateId && useStateProps!.setStateId(option.value);
        default:
          break;
      }
    };

类型“CreateUserToItemUTateUserStates | UpdateStoreSpatialCommissionsVariableSusState”上不存在属性“setCityId”

类型“UpdateRespatialCommissionsVariableSusEstate”ts（2339）上不存在属性“setCityId”

如何修复此错误？
类型中有问题吗？
您的条件类型是泛型的，需要一个类型参数，但您在
Props
界面中没有给它一个。属性
useStateProps？：由于
type
不是一个类型，因此该属性的类型
未编译；它似乎是另一个属性的关键名称。为了让它发挥作用，你需要
Props
本身是通用的

我建议您使用
Props
a来获得所需的行为，而不是使用泛型或条件类型。以下是一种与当前设置类似的方法：

interface TypeMap {
    createUserToSiteMutate: CreateUserToSiteMutateUseStates,
    updateStoreSpatialCommitmentsVariables: UpdateStoreSpatialCommitmentsVariablesUseState,
    createUnitVariables: null
}

type Props = { [K in keyof TypeMap]: {
    type: K,
    useStateProps?: TypeMap[K];
} }[keyof TypeMap];

如果您检查该情况，
Props
相当于：

type Props = {
    type: "createUserToSiteMutate";
    useStateProps?: CreateUserToSiteMutateUseStates | undefined;
} | {
    type: "updateStoreSpatialCommitmentsVariables";
    useStateProps?: UpdateStoreSpatialCommitmentsVariablesUseState | undefined;
} | {
    type: "createUnitVariables";
    useStateProps?: null | undefined;
}

因此，现在
Props
类型有一个
type
判别属性，如果打开它，可以使用该属性将类型缩小为三个联合成员之一。请注意，要做到这一点，必须将属性保存在单个
Props
对象中；您不能将它们复制到其他变量并保持
props
和
useStateProps
之间的相关性。因此，
if（props.type==“…”{props.useStateProps…}否则…
将起作用，但`const type=props.type；const useStateProps=props.useStateProps；如果（type==“…”{useStateProps…}否则…”将不会

所以你应该这样写：

declare const props: Props;

const handleChange = (option: SelectorOptions) => {
    switch (props.type) {
        case "createUserToSiteMutate":
            props.useStateProps!.setCityId && props.useStateProps!.setCityId(null);
            props.useStateProps!.setStateId && props.useStateProps!.setStateId(option.value);
        default:
            break;
    }
};

你可以看到它现在编译没有错误。好的，希望这有帮助；祝你好运

 
在UpDestestRealServices中没有SETCITYID，但是我得到了这个错误。请考虑将这里的代码编辑成一个真实的描述。现在有很多错误似乎与你的问题无关。如果有人把代码丢到一个独立的IDE中，他们应该能够重现你的特定ISS。无需花费时间尝试修复或选择性地忽略其他问题。
type Props = {
    type: "createUserToSiteMutate";
    useStateProps?: CreateUserToSiteMutateUseStates | undefined;
} | {
    type: "updateStoreSpatialCommitmentsVariables";
    useStateProps?: UpdateStoreSpatialCommitmentsVariablesUseState | undefined;
} | {
    type: "createUnitVariables";
    useStateProps?: null | undefined;
}

declare const props: Props;

const handleChange = (option: SelectorOptions) => {
    switch (props.type) {
        case "createUserToSiteMutate":
            props.useStateProps!.setCityId && props.useStateProps!.setCityId(null);
            props.useStateProps!.setStateId && props.useStateProps!.setStateId(option.value);
        default:
            break;
    }
};