check if object has key in Typescript and use that key

Question

I have the following code:

let show = {
    createTag: false,
    updateFeature: false,
    createFeatureGroup: false,
    deleteFeature: false,
    deleteCycle: false,
};

And I'm getting a value from the querystring that I want to match agains the keys of show.

The following code works ok, but I want a way to let Typescrpt infer it and avoid having to issue the cast:

const showDialog = $page.query.get('show') || '';

if (showDialog && showDialog in show) {
    // I want to get rid of the "<keyof typeof show>" cast
    show[<keyof typeof show>showDialog] = true; 
}

I though that just issueing showDialog in show typescript would know that inside that if showDialog is a key of show, but it doesn't seem to be the case.

`in` narrowing only works with string literals: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing — jonrsharpe, Oct 05 '21 at 22:40

score 14 · Answer 1 · answered Jan 22 '22 at 08:11

14

The type guard presented by @paolostyle is very specific to the show object. The following snippet is more generic and can be used for any key in any object:

export function isKeyOfObject<T>(
  key: string | number | symbol,
  obj: T,
): key is keyof T {
  return key in obj;
}

answered Jan 22 '22 at 08:11

Jasper Kuperus

1,612
1
17
22

6

I had to change this to `isKeyOfObject` — probably due to Typescript version differences? – Arthaey Dec 02 '22 at 21:49

score 8 · Accepted Answer · answered Oct 05 '21 at 23:28

You can create a type guard:

function isValidParam(k: string): k is keyof typeof show {
  return k in show;
}

const showDialog = $page.query.get('show') || '';

if (isValidParam(showDialog)) {
    show[showDialog] = true; 
}

but you decide if it's worth it. I'd probably just keep the cast, personally.

check if object has key in Typescript and use that key

2 Answers2

Linked