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

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?

Looping through an array using NgFor within an object

I'm puzzled by how my observable seems to be activating on its own without

Only map property type when the type is a union type

What can be done to prevent the angular material select from overflowing the screen?

Navigating an array using ngFor and encountering an error message saying, "Identifier not specified"

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Is the user's permission to access the Clipboard being granted?

How to utilize Enzyme to call a React prop in TypeScript

Angular Pagination: Present a collection of pages formatted to the size of A4 paper

Tips on optimizing NextJS for proper integration with fetch requests and headers functionality

What is the best way to arrange items by utilizing the Array index in JavaScript?

What is the process for creating static pages that can access local data within a NextJS 13 application?

Replace a portion of text with a RxJS countdown timer

When attempting to inject a provider from the same module, the dependencies cannot be resolved

Is there a way for me to steer clear of having to rely on the Elvis Operator?

What is the process for choosing nested colors from a theme in Material UI?

Maintain synchrony of the state with swiftly unfolding occurrences