Is it possible to confirm that a value is a valid key without prior knowledge of the object's keys during compile-time?

Question

Is it possible to confirm that a value is a valid key without prior knowledge of the object's keys during compile-time?

Is there a way in TypeScript to declare that a variable is a keyof some Record without prior knowledge of the keys?

For instance, consider an API response returning JSON data. Is it possible to define a type for the keys of this payload to ensure that when indexing through the payload, the value will not be undefined? Or must we manually check for undefined each time we access a property in the payload object?

Here's an example:

const payload: Record<string, ValidValue> = await myApiCall()

const prop1 = 'a'
const prop2 = 'b'

if (isValidKey(prop1, payload)) {
  const value1 = payload[prop1] // here, `value1` should have type `ValidValue`
}

const value2 = payload[prop2] // here, `value2` should have type `ValidValue | undefined`

typescript typeguards

Answer 1

Answer №1

I managed to make it work by implementing a type guard function, but with a slight difference – instead of returning key is keyof MyMap, I defined a type for the payload object as

Record<string, ValidValue | undefined>

. The type guard now asserts

payload is Record<K, ValidValue>

, where K corresponds to the key parameter.

You can experiment with this solution on TS Playground.

// Type alias for convenience
type Payload = Record<string, ValidValue | undefined>;

const payload: Payload = await myApiCall()

function isValidKey<K extends string>(key: K, payload: Payload): payload is Record<K, ValidValue> {
  return key in payload;
}

const prop1 = 'a'
const prop2 = 'b'

if (isValidKey(prop1, payload)) {
  const value1 = payload[prop1] // the type of `value1` should evaluate to `ValidValue` ✅
}

const value2 = payload[prop2] // the type of `value2` should evaluate to `ValidValue | undefined` ✅

Answer 2

I managed to make it work by implementing a type guard function, but with a slight difference – instead of returning key is keyof MyMap, I defined a type for the payload object as

Record<string, ValidValue | undefined>

. The type guard now asserts

payload is Record<K, ValidValue>

, where K corresponds to the key parameter.

You can experiment with this solution on TS Playground.

// Type alias for convenience
type Payload = Record<string, ValidValue | undefined>;

const payload: Payload = await myApiCall()

function isValidKey<K extends string>(key: K, payload: Payload): payload is Record<K, ValidValue> {
  return key in payload;
}

const prop1 = 'a'
const prop2 = 'b'

if (isValidKey(prop1, payload)) {
  const value1 = payload[prop1] // the type of `value1` should evaluate to `ValidValue` ✅
}

const value2 = payload[prop2] // the type of `value2` should evaluate to `ValidValue | undefined` ✅

Answer 3

Answer №2

I believe I have stumbled upon a solution that seems to be functioning correctly in the TS playground.

const myMap = [1,2,3].reduce((p, n) => ({ ...p, [Math.random()]: n }), {})

type MyMap = typeof myMap

console.log('myMap', myMap)

function isKnownKey(key: string, thing: MyMap): key is keyof MyMap {
    return Object.keys(thing).includes(key)
}

const knownTypes = ['a', 'b']
const prop1 = Object.keys(myMap)[0]
const prop2 = 'b'

if (isKnownKey(prop1, myMap)) {
    const value1 = myMap[prop1]
    console.log('value1', value1)
}

const value2 = myMap[prop2]
/*
TS Error:
Element implicitly has an 'any' type because expression of type '"b"' can't be used to index type '{}'.
  Property 'b' does not exist on type '{}'.(7053)
*/

However, there's one aspect that is puzzling and eludes my understanding: value1 returns type never. Strangely, there are no TypeScript errors raised. What could possibly be happening in this scenario?

Answer 4

I believe I have stumbled upon a solution that seems to be functioning correctly in the TS playground.

const myMap = [1,2,3].reduce((p, n) => ({ ...p, [Math.random()]: n }), {})

type MyMap = typeof myMap

console.log('myMap', myMap)

function isKnownKey(key: string, thing: MyMap): key is keyof MyMap {
    return Object.keys(thing).includes(key)
}

const knownTypes = ['a', 'b']
const prop1 = Object.keys(myMap)[0]
const prop2 = 'b'

if (isKnownKey(prop1, myMap)) {
    const value1 = myMap[prop1]
    console.log('value1', value1)
}

const value2 = myMap[prop2]
/*
TS Error:
Element implicitly has an 'any' type because expression of type '"b"' can't be used to index type '{}'.
  Property 'b' does not exist on type '{}'.(7053)
*/

However, there's one aspect that is puzzling and eludes my understanding: value1 returns type never. Strangely, there are no TypeScript errors raised. What could possibly be happening in this scenario?

Is it possible to confirm that a value is a valid key without prior knowledge of the object's keys during compile-time?

Answer №1

Answer №2

Similar questions

Can variables be declared for file paths within the HTML code in a TypeScript file?

Using React Material UI to create multiple collapse components

Using Jasmine to simulate an if/else statement in Angular/Typescript unit testing

Does this fall under the category of accepted practices for employing an effect in Angular?

Demonstrate JSON data using ngFor loop in Angular

Discover the power of TypeScript's dynamic type inference in functions

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I'm having trouble retrieving my variable within the socketcluster's socket.on function

unable to reinstall due to removal of global typing

Adjusting the transparency of TabBadge in Ionic 2

Separating the time and date into distinct variables offers flexibility in how they

Sign up for notifications about updates to a variable within an Angular service

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

Taking out the modal element from the document object model, causing the animation

Mongoose encountered an error when attempting to cast the value "ObjectID" to an ObjectId at the specified path "red.s1"

Intermittent issue with Angular 2 encountered while following the Hero Editor tutorial on angular.io

Issue with narrowing TypeScript arrays often encountered

What's the best way to group rows in an angular mat-table?

When clicking initially, the default input value in an Angular 2 form does not get set

TypeScript Redux Thunk: Simplifying State Management