Determine if an object contains a specific key in Typescript and access the value associated with that

Question

Determine if an object contains a specific key in Typescript and access the value associated with that

Here is a snippet of my code:

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

I am retrieving a value from the querystring that I want to compare against the keys in the 'show' object.

The current code works fine, but I would like TypeScript to infer it and avoid the need for casting:

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

if (showDialog && showDialog in show) {
    // I am looking for a way to eliminate the need for "<keyof typeof show>" cast
    show[<keyof typeof show>showDialog] = true; 
}

I initially thought that using showDialog in show inside the 'if' statement would inform TypeScript that showDialog is a key in 'show', but it seems this is not the case.

typescript object casting key hasownproperty

Answer 1

Answer №1

The solution offered by @paolostyle for type guarding is tailored specifically for the show object. However, the following code snippet provides a more versatile approach that can be applied to any key within any object:

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

Answer 2

The solution offered by @paolostyle for type guarding is tailored specifically for the show object. However, the following code snippet provides a more versatile approach that can be applied to any key within any object:

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

Answer 3

Answer №2

If you want to ensure a specific type, consider creating a type guard:

function isValidKey(k: string): k is keyof typeof display {
  return k in display;
}

const displayDialog = $page.query.get('display') || '';

if (isValidKey(displayDialog)) {
    display[displayDialog] = true; 
}

However, whether it's worth the effort is up to you. Personally, I would probably just stick with the cast.

Answer 4

If you want to ensure a specific type, consider creating a type guard:

function isValidKey(k: string): k is keyof typeof display {
  return k in display;
}

const displayDialog = $page.query.get('display') || '';

if (isValidKey(displayDialog)) {
    display[displayDialog] = true; 
}

However, whether it's worth the effort is up to you. Personally, I would probably just stick with the cast.

Determine if an object contains a specific key in Typescript and access the value associated with that

Answer №1

Answer №2

Similar questions

Guide on creating a custom type for an object utilizing an enum framework

Convert Java object to different object with side effects

Sharing information between a cordova plugin and an Angular application

Modify the entire WebStorm project to adjust the indentation from 2 spaces to 4 spaces

No response from NgClass after executing the function

What is the most efficient method for parsing nested objects in AngularJS?

What factors contribute to the variations in results reported by Eslint on different machines?

Adapt the size of HTML video tags based on the width of the screen and level of

What causes the discrepancy in errors when dealing with subtype versus regular assignments?

What is the proper way to implement this in a TypeScript constructor?

What is the method for storing a JSON object path in a variable for use in a template?

Difficulty in toggling the visibility of the react-date-range picker package when selecting a date

Only filter the array by its value if the value is specified

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Different outputs based on input in Typescript

What is the method for defining functions that accept two different object types in Typescript?

Is it possible to use a type predicate to return `void` from a function?

Unable to access data from Service during the OnInit lifecycle hook in Angular 2

Switching templates based on elementRef width adjustments