TypeScript 中的条件泛型类型使用 Discriminated Union

Question

I have two interfaces in my code that I want to select one type between these two.

Here is the code for the interfaces:

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

I created a type to recognition of true interface:

type whichType<T> = T extends "createUserToSiteMutate"
  ? createUserToSiteMutateUseStates
  : T extends "updateStoreSpatialCommitmentsVariables"
  ? updateStoreSpatialCommitmentsVariablesUseState
  : null;

And finally I used the whichType :

export interface Props {
  type:
    | "createUserToSiteMutate"
    | "createUnitVariables"
    | "updateStoreSpatialCommitmentsVariables";
  useStateProps?: whichType<type>;
}

But when I use Props , I get this error:

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

Property 'setCityId' does not exist on type 'createUserToSiteMutateUseStates | updateStoreSpatialCommitmentsVariablesUseState'.

Property 'setCityId' does not exist on type 'updateStoreSpatialCommitmentsVariablesUseState'.ts(2339)

How can I fix this error? Is a problem in whichType ?

Answer 1

Your conditional type is generic and requires a type parameter, but you haven't given it one inside your Props interface. The property useStateProps?: whichType<type> doesn't compile because type is not a type; it seems to be the key name of another property. In order for that to work you need Props to itself be generic.

Instead of using generics or conditional types I'd suggest that you make Props a discriminated union to get the desired behavior. Here's one way to do it that seems similar to your current setup:

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

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

If you inspect that, Props is equivalent to:

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

So now the Props type has a type discriminant property which can be used to narrow the type to one of the three union members if you switch on it. Note that you have to keep the properties in a single Props object to do this; you can't copy them to other variables and maintain the correlation between props and useStateProps . So if (props.type === "...") { props.useStateProps... } else ... will work, but `const type = props.type; const useStateProps = props.useStateProps; if (type == "...") { useStateProps... } else ..." will not.

So this would be how you'd write it:

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

You can see that it compiles without error now. Okay, hope that helps; good luck!

Link to code