What is the best way to search for a specific value in the Record definition?

Question

What is the best way to search for a specific value in the Record definition?

In the documentation for Typescript, a type is defined to be used as keys into a Record<>. It seems like this is done to restrict and secure the keys that can be utilized.

type CatName = "miffy" | "boris" | "mordred";

What exactly is this type? How can I search through it to check if it includes a specific string value, like checking if "bart" is one of its allowed values?

If we consider the earlier union type being used as a key in a Record based on the docs:

const cats: Record<CatName, CatInfo> = {}

But what happens if, during runtime, we receive data for a cat name not included in the predefined list, for example 'bart', and try to add an entry for that new cat name? Will this result in an error?

typescript

Answer 1

Answer №1

TypeScript's type system is specifically for compilation purposes; it does not provide runtime value checking. To perform such checks, you should define your list as an Array or Set.

const CAT_NAMES = ["miffy", "boris", "mordred"] as const;
type CatName2 = typeof CAT_NAMES[number];

as const serves as a const assertion. By using it, you assure TypeScript that the values in CAT_NAMES will remain unchanged, resulting in the typing of CAT_NAMES as
```
readonly ["miffy", "boris", "mordred"]
```
, rather than a simple string[].
typeof CAT_NAMES[number] extracts the types of the array values, aiding in accessing the CAT_NAMES list without repetition.

You can utilize the Record type to specify the names as valid keys. However, caution is advised: if TypeScript assumes these values are part of a limited list, it may struggle when presented with an arbitrary string for testing. This concern applies if you define your wire format type to be of type CatName but validate against arbitrary strings; fortunately, Object.keys returns string[].

function checkNameWithoutCast(name: string): name is CatName {
  // Error: passing the wrong type (string) to `includes`,
  // as `includes` demands ("miffy" | "boris" | "mordred")!
  return CAT_NAMES.includes(name);
}

function checkName(name: string): name is CatName {
  // You could cast to string[], or cast `name` to CatName.
  return (CAT_NAMES as ReadonlyArray<string>).includes(name);
}

function yourFunction(name: string) {
  if (checkName(name)) {  // name is type (string)
    console.log(name);    // name is type ("miffy" | "boris" | "mordred")
  }
}

name is CatName2 acts as a type predicate. While returning a boolean is possible, employing a type predicate allows TypeScript to streamline the type narrowing process from string, as demonstrated in yourFunction.
Array.includes(...) and Array.indexOf(...) != -1 can function here, but for lengthy lists, transitioning to aSet alongside Set.has can optimize operations from linear-time O(n) to logarithmic-time O(log n) or constant-time O(1).

Playground Link

Answer 2

TypeScript's type system is specifically for compilation purposes; it does not provide runtime value checking. To perform such checks, you should define your list as an Array or Set.

const CAT_NAMES = ["miffy", "boris", "mordred"] as const;
type CatName2 = typeof CAT_NAMES[number];

as const serves as a const assertion. By using it, you assure TypeScript that the values in CAT_NAMES will remain unchanged, resulting in the typing of CAT_NAMES as
```
readonly ["miffy", "boris", "mordred"]
```
, rather than a simple string[].
typeof CAT_NAMES[number] extracts the types of the array values, aiding in accessing the CAT_NAMES list without repetition.

You can utilize the Record type to specify the names as valid keys. However, caution is advised: if TypeScript assumes these values are part of a limited list, it may struggle when presented with an arbitrary string for testing. This concern applies if you define your wire format type to be of type CatName but validate against arbitrary strings; fortunately, Object.keys returns string[].

function checkNameWithoutCast(name: string): name is CatName {
  // Error: passing the wrong type (string) to `includes`,
  // as `includes` demands ("miffy" | "boris" | "mordred")!
  return CAT_NAMES.includes(name);
}

function checkName(name: string): name is CatName {
  // You could cast to string[], or cast `name` to CatName.
  return (CAT_NAMES as ReadonlyArray<string>).includes(name);
}

function yourFunction(name: string) {
  if (checkName(name)) {  // name is type (string)
    console.log(name);    // name is type ("miffy" | "boris" | "mordred")
  }
}

name is CatName2 acts as a type predicate. While returning a boolean is possible, employing a type predicate allows TypeScript to streamline the type narrowing process from string, as demonstrated in yourFunction.
Array.includes(...) and Array.indexOf(...) != -1 can function here, but for lengthy lists, transitioning to aSet alongside Set.has can optimize operations from linear-time O(n) to logarithmic-time O(log n) or constant-time O(1).

Playground Link

What is the best way to search for a specific value in the Record definition?

Answer №1

Similar questions

"Implementing a date picker in your Ionic 5 app: A step-by-step

The issue of ngModel not binding to the value of ion-select in Angular Ionic

Directive for displaying multiple rows in an Angular table using material design

The swipe motion will be executed two times

Error encountered with the root reducer due to data type mismatch

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

What might be causing my action function to be triggered during the rendering process?

Managing multiple asynchronous requests through Observables in web development

Tips for populating class attributes from an Angular model

Determining a value that increases to yield a fresh sum

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

Show Timing on the Y-Axis - Bubble Graph

Angular device redirection allows you to automatically redirect users based on the device

Is there a way to inform TypeScript that the process is defined rather than undefined?

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

Implementing Firebase-triggered Push Notifications

Using React MUI Select in combination with react-hook-form does not seem to be compatible with Cypress testing

Retrieve a specific nested key using its name

Harness the power of TypeScript in a single test file with jest's expect.extend() method

Executing functions in TypeScript