Nested Generics in function definition in TypeScript

Question

I'm trying to make type-safe handlers for redux actions relying on action type. For example, any action could be described as:

type ActionType<T extends string> = {
  type: T
};

For a specific action one can have:

type MyAction = ActionType<'hey' | 'there'>;

Now, I'd like to restrict a handler function to allow only 'hey' or 'there' as a type. Finally I expect something like this:

handleAction<MyAction>('hey');

where the definition of the handler function could be:

function handleAction<A extends ActionType<T>>(type: T){
...
}

But I have a typescript compiler error:

TS2304: Cannot find name 'T'.

So, I have to modify this handler function definition in this way:

function handleAction<A extends ActionType<T>, T extends string>(type: T){
...
}

It works, but looks really ugly:

handleAction<MyAction, 'hey' | 'there'>('hey');

TS Playground

What's a better way to handle this?

Titian Cernicova-Dragomir · Accepted Answer · 2018-03-07 06:15:37Z

17

Edit

You can use a type query to get the type of type:

function handleAction<A extends ActionType<string>>(type: A ['type']) {
}

handleAction<MyAction>('hey');

Or you can use conditional types in 2.8 to extract the generic parameter from ActionType (2.8 is unreleased at the time of writing, but will be released in March 2018, you can get it via npm install -g typescript@next)

type ActionType<T extends string> = {
  type: T
};

type MyAction = ActionType<'hey' | 'there'>;


function handleAction<A extends ActionType<string>>(type: A extends ActionType<infer U> ? U : never) {
}

handleAction<MyAction>('hey');

This solution is based on the inference behavior of conditional type. ActionType<infer U> basically says: If a extends ActionType of some other type U give me the type U. So U will be whatever string literal type was passed to ActionType in our case. Then we use U on the true branch of the conditional type and this becomes the final type of out conditional type. In this case we don't care about the false branch so we use never.

edited Mar 7, 2018 at 6:15

answered Mar 5, 2018 at 6:03

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

c69 Over a year ago

could you elaborate a bit on how infer works ? I'm not sure that second solution could work.. because shapes (of string vs {type:string})are different

Titian Cernicova-Dragomir Over a year ago

@c69 Added a bit of an explanation, I'm a bit hyped about conditional types and see them everywhere, the first solution of a type query is definitely the better one, I wrote the conditional version first and then realized it was overkill and added the second one.

c69 · Accepted Answer · 2018-03-06 22:56:28Z

There are two approaches:

Use the string union.

I like this one because its simpler (for the problem you described):

type FileAction = 'save' | 'read' | 'copy';
function doAction (a) {
}
declare function doAction<A extends string> (action: A): void;

doAction<FileAction>('save'); // good, as desired
doAction<FileAction>('xxx'); // error, as expected

Get .type via bracket notation.

This is one looks more hacky but it's a valid syntax .. and it does not require you to change your object shape.

type FileFile <T extends string> = {
  type: T;
}
type WordFile = FileFile<'why'|'you'|'no'|'work'>;

function doAction2 (a) {
}
declare function doAction2<F extends FileFile<string>> (action: F["type"]): void;

doAction2<WordFile>('no'); // good, as desired 
doAction2<WordFile>('xxx'); // error, as expected

kshetline · Accepted Answer · 2018-03-05 02:34:28Z

0

This cleans things up some, but I'm not sure if it's what you're hoping for:

type ActionType<T extends string> = {
  type: T
};

type MyWord = 'hey' | 'there';
type MyAction = ActionType<MyWord>;

function handleAction<A extends ActionType<T>, T extends string>(type: T){
}

handleAction<MyAction, MyWord>('hey');

answered Mar 5, 2018 at 2:34

kshetline

14k6 gold badges49 silver badges96 bronze badges

Collectives™ on Stack Overflow

Nested Generics in function definition in TypeScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related