Typescript key-value pair where key is custom type

Question

I have the following key-value pair and it is being used for a filtering system. When we apply a filter, we could merge it with all the current ones, or just apply it with resetting the previous.

type MINE = "mine"
type BOOKMARKED = "bookmarked"
type TEXT_QUERY = "textQuery"
type JobType = "type"

export type PossibleFilterKeys = MINE | BOOKMARKED | TEXT_QUERY | JobType

type Filter = {
    [key in PossibleFilterKeys]: string;
};

Then I have the following prototype of a function:

const apply = (filter: Filter) => void

When we use it:

// name: PossibleFilterKeys,
// value: string,
apply({[name]: value})

It triggers: TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Filter'. Type '{ [x: string]: string; }' is missing the following properties from type 'Filter': mine, bookmarked, textQuery, type

I want to apply a filter, its key could be one of the PossibleFilterKeys type, but it throws the error above.

Why does this happen?

Thanks to @31piy the problem was solved. As he said, we could do: [key in PossibleFilterKeys]?: string but we also can use the Partial utility: apply: (filter: Partial<Filter>) => void — Stephan882
– Stephan882, Commented Mar 22, 2021 at 9:49

31piy · Accepted Answer · 2021-03-22 09:24:16Z

4

The issue is with this statement:

type Filter = {
    [key in PossibleFilterKeys]: string;
};

The above declares that Filter must contain all the keys of PossibleFilterKeys. You can make those optional by the following syntax:

type Filter = {
    [key in PossibleFilterKeys]?: string; // <-- Place a question mark
};

answered Mar 22, 2021 at 9:24

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

3 Comments

Stephan882 Over a year ago

Yeah it works, thank you! Another way is: apply: (filter: Partial<Filter>) => void

31piy Over a year ago

@Stephan882 -- I don't think that's a good choice. Your way just solves one part, i.e. to call the function with a partial object. What about creating the Filter objects? Those still require all the keys.

Stephan882 Over a year ago

Well, you are right. Currently I'm not creating anything. We call the function, pass an object, and merge or replace the current one. Thank you again, I do really appreciate your help!

Collectives™ on Stack Overflow

Typescript key-value pair where key is custom type

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related