Using Typescript Generics: Assigning Types Based on Object Properties

Question

Using Typescript Generics: Assigning Types Based on Object Properties

I am working with a Container class that accepts a dynamic object through its constructor. This dynamic object contains multiple classes, and I need to assign one or more of those classes to a property in the Container without sacrificing type safety.

Here's what I have attempted so far. The error message I'm encountering is

Property 'bbb1' does not exist on type 'A | B'.

If you want to check out the code and play around with it, feel free to visit this Playground

class A {
  aaa1 = "aaa1"
  aaa2 = "aaa2"
}

class B {
  bbb1 = "bbb1"
  bbb2 = "bbb2"
}

class Container<T> {
  all: T;
  target: T[keyof T];
  constructor(resources: T) {
    this.all = resources;
    this.target = resources["b" as keyof T];
  }
}

const obj = { a: new A(), b: new B() };
const container = new Container(obj);
console.log(container.target.bbb1) // Error

If you have any suggestions on how to approach this issue, I would greatly appreciate your input! Thank you.

typescript

Answer 1

Answer №1

class X {
  xxx1 = "xxx1";
  xxx2 = "xxx2";
}

class Y {
  yyy1 = "yyy1";
  yyy2 = "yyy2";
}

class Holder<T, K extends keyof T> {
  all: T;
  key: K;
  target: T[K];
  constructor(data: T, id: K) {
    this.all = data;
    this.key = id;
    this.target = data[id];
  }
}

const objects = { x: new X(), y: new Y() };
const box = new Holder(objects, "y");
console.log(box.target.yyy1); // No issue
console.log(box.Key); // "y"

implement a generic constraint K to signify the identifier of the information object.

Answer 2

class X {
  xxx1 = "xxx1";
  xxx2 = "xxx2";
}

class Y {
  yyy1 = "yyy1";
  yyy2 = "yyy2";
}

class Holder<T, K extends keyof T> {
  all: T;
  key: K;
  target: T[K];
  constructor(data: T, id: K) {
    this.all = data;
    this.key = id;
    this.target = data[id];
  }
}

const objects = { x: new X(), y: new Y() };
const box = new Holder(objects, "y");
console.log(box.target.yyy1); // No issue
console.log(box.Key); // "y"

implement a generic constraint K to signify the identifier of the information object.

Answer 3

Answer №2

Here is the revised solution. I made a few adjustments while maintaining type safety to prevent the error from occurring.

class X {
  xxx1 = "xxx1"
  xxx2 = "xxx2"
}

class Y {
  yyy1 = "yyy1"
  yyy2 = "yyy2"
}

class Box<S> {
  set: S;
  focus: S[keyof S];
  constructor(contents: S) {
    this.set = contents;
    this.focus = contents["c" as keyof S] ? contents["c" as keyof S] : contents["d" as keyof S];
  }
}

const object = { c: new X(), d: new Y() };
const box = new Box(object);

if (box.focus instanceof Y) {
  console.log(box.focus.yyy1)
} else if (box.focus instanceof X) {
  console.log(box.focus.xxx1)
}

Answer 4

Here is the revised solution. I made a few adjustments while maintaining type safety to prevent the error from occurring.

class X {
  xxx1 = "xxx1"
  xxx2 = "xxx2"
}

class Y {
  yyy1 = "yyy1"
  yyy2 = "yyy2"
}

class Box<S> {
  set: S;
  focus: S[keyof S];
  constructor(contents: S) {
    this.set = contents;
    this.focus = contents["c" as keyof S] ? contents["c" as keyof S] : contents["d" as keyof S];
  }
}

const object = { c: new X(), d: new Y() };
const box = new Box(object);

if (box.focus instanceof Y) {
  console.log(box.focus.yyy1)
} else if (box.focus instanceof X) {
  console.log(box.focus.xxx1)
}

Using Typescript Generics: Assigning Types Based on Object Properties

Answer №1

Answer №2

Similar questions

Tips for effectively narrowing the `undefined` type

Angular 4 - Error: Unable to call this.changeHook as it is not a function

Error: The identifier HTMLVideoElement has not been declared

Customizable column layout in react-grid-layout

Unable to find solutions for all parameters of the TemlComponent: (?). encountering a syntax error (compiler.js:1016)

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

Autocomplete feature shows usernames while storing corresponding user IDs

When activating SSR in the Urql client, I encountered the following unexpected error: Server HTML should not include an <a> within a <div>

Create categories for static array to enable automatic suggestions

Incorporating TypeScript into a project originally developed in JavaScript

Undefined values do not function properly with discriminated unions

Modify visibility within a subclass

What is the best way to start a class instance within a stateless function component in React?

OCI: Predict expenses based on a selection of virtual machines

Is it considered beneficial to use Observable as a static class member?

Angular does not recognize the boolean variable

Merging Type-GraphQL and Typegoose through a Variety of Decorators

Encountered an issue with running tests in vscode-test - runTests function throwing

Attempting to render a string in React is causing an error because the type 'void | undefined' is not compatible with the type 'ReactNode'

Encountering issues with pipes and ngModel functionality in Angular causing errors