Setting up Typescript: The Guide to Declaring a Dependent Property

Question

Setting up Typescript: The Guide to Declaring a Dependent Property

In my current project, I am working on creating a declaration file for the quadstore library. This library has a class that requires a constructor parameter called contextKey. The value of this parameter determines the name of a field on method arguments. To put it simply, in Typescript terms, it would look something like this:

interface MethodArg {
  a: string;
  b: string;
  <<The property name here depends on the value of contextKey>>: string;
}

class A {
  constructor(options?: {contextKey: string}) {}

  fn(arg: MethodArg) {...}
}

I am currently exploring how to declare the type of MethodArg so that its third property's name is dependent on the value provided to the class constructor. Is it even possible to achieve this in a declaration file?

typescript

Answer 1

Answer №1

It may not be feasible because the value of the constructor parameter is determined at runtime, while the type of MethodArg is set during compile time(?), making it impossible for the latter to rely on the former. However, if you wish to convert the value into a type parameter (thus providing runtime information to compile time), you could try implementing it in the following manner:

type MethodArg<E extends keyof any> = {
  [T in E]: string;
} & { a: string; b: string };

class A<T extends string> {
  constructor(options?: { contextKey: T }) {}
  fn(arg: MethodArg<T>) {}
}

new A({ contextKey: "foo" }).fn({
  a: "100",
  b: "100",
  foo: "foo",
});


// Avoid doing it this way
let foo: string = "123";
new A({ contextKey: foo }).fn({
  a: "100",
  b: "200",
});

Answer 2

It may not be feasible because the value of the constructor parameter is determined at runtime, while the type of MethodArg is set during compile time(?), making it impossible for the latter to rely on the former. However, if you wish to convert the value into a type parameter (thus providing runtime information to compile time), you could try implementing it in the following manner:

type MethodArg<E extends keyof any> = {
  [T in E]: string;
} & { a: string; b: string };

class A<T extends string> {
  constructor(options?: { contextKey: T }) {}
  fn(arg: MethodArg<T>) {}
}

new A({ contextKey: "foo" }).fn({
  a: "100",
  b: "100",
  foo: "foo",
});


// Avoid doing it this way
let foo: string = "123";
new A({ contextKey: foo }).fn({
  a: "100",
  b: "200",
});

Setting up Typescript: The Guide to Declaring a Dependent Property

Answer №1

Similar questions

Creating a unique object by dynamically incorporating features from another object

Redirecting to login on browser refresh in Angular using Firebase's canActivate feature

The expiration of the Gitlab CI/CD cache leads to the failure of the build process

Is there a method to enhance the efficiency of generating the code coverage report in VSTS?

What is the correct way to integrate knex using inversify?

The response parser in Angular 7 is failing to function correctly

Using TypeScript, extract the value of a Promise from a Page Object

Angular 2 Validation Customizer

Incorporate Select2 functionality within the Angular2 application

Angular 8 experiencing unexpected collision issues

Show Timing on the Y-Axis - Bubble Graph

TypeScript integrated Cypress code coverage plugin

The specified data type is not compatible with the current context and cannot be treated as an array

Specify the second parameter as a generic class that corresponds to the first parameter of the function

Ways to modify the CSS of an active class within a child component when clicking on another shared component in angular

Rearranging items within an array in a React component

A guide to testing the mui Modal onClose method

Best practice for validating a form using React: Why the state doesn't update immediately with useState and onSubmit

Unable to interact with Span in a table cell - Protractor/Typescript error

I am unable to refresh the table data in Angular