TypeScript 不推断具体类型

Question

In the code below, TypeScript gives an error on the map function:

Property 'map' does not exist on type 'string | string[]'.

But propertyValue in that context is string[] , because propertyName is 'chapters' . Why doesn't TypeScript know that?

interface Book {
  title: string;
  chapters: string[];
}

const setBookProperty = <K extends keyof Book>(propertyName: K, propertyValue: Book[K]) => ({
  payload: { propertyName, propertyValue },
});

const reducer = (action: ReturnType<typeof setBookProperty>) => {
  switch (action.payload.propertyName) {
    case 'chapters': {
      const x = action.payload.propertyValue.map(s => s === 'Chapter 1');
    }
  }
};

Answer 1

ReturnType<typeof setBookProperty> is evaluated once as the type for action and the type it returns doesn't maintain any pairing between propertyName and propertyValue . Instead it is the union for all possible values of each, without any understanding that one depends on the other.

If you inspect the type of action , you'll see that it is:

{
    payload: {
        propertyName: "title" | "chapters";
        propertyValue: string | string[];
    };
}

Seeing that, you can understand how narrowing one won't narrow the other.

In order to know the value of one based on the other, the type of your action needs to be a union of all valid pairings. This does require more code, but it will get you the result that you want.

Define a generic action which gives the pairing for a specific key

type ActionSpecific<K extends keyof Book> = {
    payload: {
        propertyName: K,
        propertyValue: Book[K]
    }
}

Use a mapping to get the union for all keys. In this case it is trivial since we only have two keys.

type ActionMap = {
    [K in keyof Book]: ActionSpecific<K>
}

type ActionUnion = ActionMap[keyof Book]

ActionUnion resolves to ActionSpecific<"title"> | ActionSpecific<"chapters"> ActionSpecific<"title"> | ActionSpecific<"chapters"> so it maintains the pairing. If you were to type ActionSpecific<keyof Book> instead you would get the same bad type as before where the pairing is lost.

(Optional) Declare the return type of setBookProperty as ActionSpecific<K>

const setBookProperty = <K extends keyof Book>(propertyName: K, propertyValue: Book[K]): ActionSpecific<K> => ({
    payload: { propertyName, propertyValue },
});

Use ActionUnion as the type for your reducer function's action , and the switch will be able to discriminate between members of the union.

const reducer = (action: ActionUnion) => {
    switch (action.payload.propertyName) {
        case 'chapters': {
            const x = action.payload.propertyValue.map(s => s === 'Chapter 1');
        }
    }
};