What is the correct way to fetch all attributes of a particular key type from an interface using TypeScript?

Question

What is the correct way to fetch all attributes of a particular key type from an interface using TypeScript?

Exploring arrays, I discovered the following setup:

const MyArray = [
  { name: "Alice", age: 15 },
  { name: "Bob", age: 23 },
  { name: "Eve", age: 38 },
];
 
type Person = typeof MyArray[number];

Curious, I attempted a similar approach with interfaces:

interface A {
  a: number;
}

type PropertiesTypeByString = A[string]

Unfortunately, an error was thrown:

Type 'A' has no matching index signature for type 'string'.

If I want to access all properties of type string, what is the best way to tackle this issue?

typescript

Answer 1

Answer №1

If you wish to access an object type A by indexing, the key must be compatible with keyof A (using the keyof type operator). Since A does not have a string index signature, you cannot use A[string]. Instead, you can merge keyof A with string to obtain "all the keys of A that are of type string:

const sym = Symbol();
interface A {
  a: number;
  b: boolean;
  3: Date; // numeric key, not string
  [sym]: Element // symbol key, not string
}

type StringPropertiesType  = A[keyof A & string];
//   ^? type PropertiesTypeByString  = number | boolean

Link to playground with code

Answer 2

If you wish to access an object type A by indexing, the key must be compatible with keyof A (using the keyof type operator). Since A does not have a string index signature, you cannot use A[string]. Instead, you can merge keyof A with string to obtain "all the keys of A that are of type string:

const sym = Symbol();
interface A {
  a: number;
  b: boolean;
  3: Date; // numeric key, not string
  [sym]: Element // symbol key, not string
}

type StringPropertiesType  = A[keyof A & string];
//   ^? type PropertiesTypeByString  = number | boolean

Link to playground with code

Answer 3

Answer №2

You have the ability to remove keys from an object that do not match a specific type (e.g. string) using a technique called Mapped Type and Key Mapping. If a key K is a string, it remains in the object; otherwise, it is remapped to never.

interface A {
  a: number;
  1: string;
}

type KeysOfType<T, U extends PropertyKey> = keyof {
  [K in keyof T as K extends U ? K : never]: T[K];
};
type Result = KeysOfType<A, string>;
//   ^? type Result = "a"

TypeScript Playground

In relation to the question at hand, it's important to note that typeof MyArray[number] doesn't pertain specifically to keys of type number. The concept of indexing with number simply implies that all items in the array can be accessed in the same manner. Instead of specifying typeof MyArray[0] or typeof MyArray[1], you can generalize by using number.

Answer 4

You have the ability to remove keys from an object that do not match a specific type (e.g. string) using a technique called Mapped Type and Key Mapping. If a key K is a string, it remains in the object; otherwise, it is remapped to never.

interface A {
  a: number;
  1: string;
}

type KeysOfType<T, U extends PropertyKey> = keyof {
  [K in keyof T as K extends U ? K : never]: T[K];
};
type Result = KeysOfType<A, string>;
//   ^? type Result = "a"

TypeScript Playground

In relation to the question at hand, it's important to note that typeof MyArray[number] doesn't pertain specifically to keys of type number. The concept of indexing with number simply implies that all items in the array can be accessed in the same manner. Instead of specifying typeof MyArray[0] or typeof MyArray[1], you can generalize by using number.

What is the correct way to fetch all attributes of a particular key type from an interface using TypeScript?

Answer №1

Answer №2

Similar questions

Challenges with implementing asynchronous functions in NestJS controllers

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Is there a way to extract various pieces of data from a single object and implement them in a NextJs 13 application directory?

Encountering "Module ts-jest not found in the transform option" Error During Bazel Testing

Adding Crypto-JS to an Angular 2 application

Enhancing Subscription Collection with Angular and RX Framework

Display the list of cities associated with the country chosen in the form

Manipulating arrays of objects using JavaScript

Adding corresponding classes to the body element based on the selected radio button in Angular 6

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

Issues with the functionality of Angular Firebase Authentication Service

"Import data from a text file and store it as an array of objects using Types

Retrieve data from TypeScript file (.ts) and use it in an HTML document

What could be causing the strange output from my filtered Object.values() function?

Exploring the versatility of string types in TypeScript

Is it possible to retrieve all mandatory attributes of a TypeScript object?

Develop a simulated version that does not include all the functionalities of the primary service

Apply a spread of nested elements onto another spread

What is a way to conceal an Angular Material FormGroup on the webpage until the data has been retrieved from the background?

Navigating from a Card to a new View in Angular