Extending a union type exactly

Question

Suppose the following sample code:

type Action = "GET" | "POST" | "PUT";
type Handler<A extends Action> = (action: A) => void;

const handlers: Partial<Record<Action, Handler<Action>>> = { };

function register<A extends Action>(action: A, handler: Handler<A>) {
    /*
    Error:
    Type 'Handler<A>' is not assignable to type 'Partial<Record<Action, Handler<Action>>>[A]'.
        Type 'Handler<A>' is not assignable to type 'Handler<Action>'.
            Type 'Action' is not assignable to type 'A'.
            'Action' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype of constraint 'Action'.
                Type '"GET"' is not assignable to type 'A'.
                '"GET"' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype of constraint 'Action'.
     */
    handlers[action] = handler;
}

To my understanding, this error above occurs because A allows for types larger than Action (e.g. it could be Action | "DELETE"), but my handlers record only allows for exactly the Action union type. There are ways I can sort of work around this:

• Cast down handler internally. This quiets down the compiler without actually solving the problem, as the user can still pass a larger type into register. Plus, casts are never ideal :)
• Make the function concrete, register(action: Action, handler: Handler<Action>). This now means that action and handler don't have to agree in their types, which can lead to runtime errors.

As neither of these workarounds fully solve the issue, is there a way for me to enforce that action and handler both use the same A, while also not allowing for A to be any larger than Action?

---

Edit:

I've actually found an even smaller minimum repro that gives the same error:

function foobar<T extends "foo" | "bar">(func: (arg: T) => void): (arg: "foo" | "bar") => void {
    return func;
}

where the return statement gives the same error as above. This reveals the actual issue: T can actually be smaller than the union, so you might end up passing in a function that can handle less cases than what's expected.

Answer 1

A good solution won't exist unless this or this is implemented so just cast it.

A extends Action doesn't allow A to be anything "larger" than Action. It cannot be Action | "DELETE". A extends B means that A is a subtype of B, or that if you have a value of type A it must also be of type B. A value of type Action | "DELETE" is not required to be a value of type Action, since it might be "DELETE".

You probably want handlers to be defined as a mapped type that correlates the key to the value: const handlers: {[K in Action]?: Handler<K>} = {};

But the issue will remain that the compiler can't see that handlers[action] and handler are compatible, for the reasons mentioned in the first sentence above. There's not great support for correlated types in TypeScript and this has only gotten worse since TS3.5 has gotten more strict with indexed access.

Answer 2

When you extend a type in TypeScript you are extending the constraints on the type (which means you are reducing the range of values the type can contain).

If you want to be able to "extend" the range of values (in the way you're thinking about it), you need to start with a wide scope for your initial type definition so you can narrow that initial broad scope to the subset of values you want. Try this:

type BroadAction = "GET" | "POST" | "PUT" | string;
function foo<T extends BroadAction>() {
  // do something
}
foo<"GET" | "POST" | "PUT" | "INFO" | "DELETE">();

The above code lets you "extend" the allowed list of actions in the way you're thinking about, by framing it in the context of extending the constraints on the type from allowing all strings to just allowing some strings.

The downside of the nature of extend in TypeScript is that the following lines are also valid.

type BroadAction = "GET" | "POST" | "PUT" | string;
function foo<T extend BroadAction>() {
  // do something
}
foo<"GET">();

type Action = "GET" | "POST" | "PUT";
function bar<T extends Action>() {
  // do something
}
bar<"GET">();