Choose the object's property name using TypeScript through an interface

Question

Choose the object's property name using TypeScript through an interface

Consider a simplified code snippet like the following:

interface MyBase {
    name: string;
}
  
interface MyInterface<T extends MyBase> {
    base: MyBase;
    age: number;
    property: "name"   // should be: "string" but only properties from T
}    
  
const myFunc = <T extends MyBase>(item: MyInterface<T>) => {
    return item.base[item.property];
}
  
let t:MyInterface<MyBase> = {base: {name: "Chris"}, age: 30, property: "name"};
console.log(myFunc(t));  // will log "Chris"

The code above demonstrates accessing a property from a base class using the string "property" from MyInterface. This approach works because it is specifically limited to being just "name."

What I want to accomplish is restricting the property to only allow strings representing properties on the generic object T. If I were to change it to just "string," Typescript would understandably raise an error in myFunc, and I'd prefer not to resort to explicitly casting to any.

Is there a way to achieve this alternative constraint?

Thanks in advance, Christoph

typescript interface type-inference base-class

Answer 1

Answer №1

If you want to make use of keyof, here is a slightly tweaked version of your code provided below:

interface MyBase {
  type: string;
}

interface MyGeneric<T extends MyBase> {
  base: T;
  size: number;
  attribute: keyof T; // expected to be: "string" but only properties from T
}

const customFunc = <T extends MyBase>(element: MyGeneric<T>) => {
  return element.base[element.attribute];
};

let customElement: MyGeneric<MyBase> = {
  base: { type: "John" },
  size: 25,
  attribute: "type",
};
console.log(customFunc(customElement));

Answer 2

If you want to make use of keyof, here is a slightly tweaked version of your code provided below:

interface MyBase {
  type: string;
}

interface MyGeneric<T extends MyBase> {
  base: T;
  size: number;
  attribute: keyof T; // expected to be: "string" but only properties from T
}

const customFunc = <T extends MyBase>(element: MyGeneric<T>) => {
  return element.base[element.attribute];
};

let customElement: MyGeneric<MyBase> = {
  base: { type: "John" },
  size: 25,
  attribute: "type",
};
console.log(customFunc(customElement));

Choose the object's property name using TypeScript through an interface

Answer №1

Similar questions

Implement a back-to-top feature with a scroll button (Ionic 2 | Typescript)

Checking a TypeScript project with various start points for linting

Error encountered when asynchronously iterating over an object in TypeScript

In Angular, set the default value of the first item in the list to be highlighted when the page loads

Instance of "this" is undefined in Typescript class

Is there a Typescript function error that occurs when attempting to rename a key, stating it "could potentially be instantiated with a different subtype"?

Using RxJS to merge various HTTP requests into a unified and flattened observable array

What is a simple way to exclude a prop from a declaration in a React/TypeScript project in order to pass it as undefined

The rapid execution of code causing an observable race condition

Combining multiple arrays of objects using multiple keys with Angular 9 and Typescript

Combining vue with deno and vscode: A guide to seamless development integration

Using TypeScript to type styled-system props

What is the best way to retrieve every single element stored in an Object?

Issues with sending emails through Nodemailer in a Next.js project using Typescript

Decrease the construction duration within a sprawling Angular 8 project

How to perform a fetch on a local path in Next.js?

The Observable<ArrayBuffer> type does not have a property map

Typescript's ability to have Enums with dynamic keys

Ways to retrieve a value from a span using the Document Object Model

Testing Angular: Implementing Mock Classes and Services using the Any Data Type