What is the best way to determine the property type dynamically in TypeScript based on the value of another property?

Question

What is the best way to determine the property type dynamically in TypeScript based on the value of another property?

I have been working with Polymorphic relationships and currently have the following TypeScript interface defined:

interface SubjectA {}
interface SubjectB {}
interface SubjectC {}

enum SubjectType {
  SubjectA = 'Subject A',
  SubjectB = 'Subject B',
  SubjectC = 'Subject C',
}

interface ExampleSubject {
  type: SubjectType;
  subject: SubjectA | SubjectB | SubjectC
}

In this scenario, it is clear that ExampleSubject.subject can be one of three possible subject types (SubjectA, SubjectB, SubjectC). My goal is to dynamically resolve its type based on the value of ExampleSubject.type. For instance, if ExampleSubject.type is set to SubjectType.SubjectA, then ExampleSubject.subject should correspond to SubjectA.

I would appreciate any guidance on how to achieve this dynamic resolution. Thank you

javascript typescript

Answer 1

Answer №1

One way to achieve this functionality is by using a discriminated union type, which allows for defining multiple interfaces that share a common property to differentiate between them (see documentation for more information)

interface SubjectX { attribute: 'x' }
interface SubjectY { attribute: 'y' }
interface SubjectZ { attribute: 'z' }

enum SubjectCategory {
  SubjectX = 'Subject X',
  SubjectY = 'Subject Y',
  SubjectZ = 'Subject Z',
}

interface ExampleSubjectX {
  category: SubjectCategory.SubjectX;
  subject: SubjectX
}
interface ExampleSubjectY {
  category: SubjectCategory.SubjectY;
  subject: SubjectY
}
interface ExampleSubjectZ {
  category: SubjectCategory.SubjectZ;
  subject: SubjectZ
}

type ExampleSubjectType = ExampleSubjectX | ExampleSubjectY | ExampleSubjectZ

const subjectX: SubjectX = {
  attribute: 'x'
}
const subjectY: SubjectY = {
  attribute: 'y'
}

const exampleValidSubject: ExampleSubjectType = {
  category: SubjectCategory.SubjectX,
  subject: subjectX
}
const exampleInvalidSubject: ExampleSubjectType = {
  category: SubjectCategory.SubjectX,
  subject: subjectY
}
/* TypeScript error: Type '{ category: SubjectCategory.SubjectX; subject: SubjectY; }' is not assignable to type 'ExampleSubjectType'.
  The attributes of 'subject.attribute' are incompatible between these types.
    Attribute '"y"' is not compatible with attribute '"x"'.(2322) */

Try out the code on the TypeScript playground

Note: It's important to make sure that the interface definitions like SubjectX have unique properties to distinguish them in a discriminated union. In this example, the attribute property serves this purpose.

Answer 2

One way to achieve this functionality is by using a discriminated union type, which allows for defining multiple interfaces that share a common property to differentiate between them (see documentation for more information)

interface SubjectX { attribute: 'x' }
interface SubjectY { attribute: 'y' }
interface SubjectZ { attribute: 'z' }

enum SubjectCategory {
  SubjectX = 'Subject X',
  SubjectY = 'Subject Y',
  SubjectZ = 'Subject Z',
}

interface ExampleSubjectX {
  category: SubjectCategory.SubjectX;
  subject: SubjectX
}
interface ExampleSubjectY {
  category: SubjectCategory.SubjectY;
  subject: SubjectY
}
interface ExampleSubjectZ {
  category: SubjectCategory.SubjectZ;
  subject: SubjectZ
}

type ExampleSubjectType = ExampleSubjectX | ExampleSubjectY | ExampleSubjectZ

const subjectX: SubjectX = {
  attribute: 'x'
}
const subjectY: SubjectY = {
  attribute: 'y'
}

const exampleValidSubject: ExampleSubjectType = {
  category: SubjectCategory.SubjectX,
  subject: subjectX
}
const exampleInvalidSubject: ExampleSubjectType = {
  category: SubjectCategory.SubjectX,
  subject: subjectY
}
/* TypeScript error: Type '{ category: SubjectCategory.SubjectX; subject: SubjectY; }' is not assignable to type 'ExampleSubjectType'.
  The attributes of 'subject.attribute' are incompatible between these types.
    Attribute '"y"' is not compatible with attribute '"x"'.(2322) */

Try out the code on the TypeScript playground

Note: It's important to make sure that the interface definitions like SubjectX have unique properties to distinguish them in a discriminated union. In this example, the attribute property serves this purpose.

Answer 3

Answer №2

If you want to distinguish between different types, consider using a discriminated union instead of an interface. Utilize the existing discriminant (SubjectType). Construct the union like this:

type ExampleSubject =
    | { type: SubjectType.SubjectA; subject: SubjectA }
    | { type: SubjectType.SubjectB; subject: SubjectB }
    | { type: SubjectType.SubjectC; subject: SubjectC };

When dealing with x of type ExampleSubject, you can refine the type of x.subject by verifying x.type:

if (x.type === SubjectType.SubjectA) {
    console.log(x.subject);
    //             ^? (property) subject: SubjectA
}

Check out the Playground example

Remember to give some content to SubjectA, SubjectB, and SubjectC so TypeScript can differentiate them properly. Since TypeScript's typing is based on structure rather than name, providing unique content helps in avoiding confusion between types.

Answer 4

If you want to distinguish between different types, consider using a discriminated union instead of an interface. Utilize the existing discriminant (SubjectType). Construct the union like this:

type ExampleSubject =
    | { type: SubjectType.SubjectA; subject: SubjectA }
    | { type: SubjectType.SubjectB; subject: SubjectB }
    | { type: SubjectType.SubjectC; subject: SubjectC };

When dealing with x of type ExampleSubject, you can refine the type of x.subject by verifying x.type:

if (x.type === SubjectType.SubjectA) {
    console.log(x.subject);
    //             ^? (property) subject: SubjectA
}

Check out the Playground example

Remember to give some content to SubjectA, SubjectB, and SubjectC so TypeScript can differentiate them properly. Since TypeScript's typing is based on structure rather than name, providing unique content helps in avoiding confusion between types.

What is the best way to determine the property type dynamically in TypeScript based on the value of another property?

Answer №1

Answer №2

Similar questions

Issue with Promise not resolving in Node when using Edge

When React first fetches data and users move to chat with each other, the state value does not update

Is there a way to choose multiple IDs in this code that all share a common word?

When I use the AngularJS otherwise function, it sends me to the incorrect route

Employing strict mode, albeit with certain exceptions

Does CausesValidation validate all validators, including validation groups?

Assignment of type 'Angular Promise<void>' is not compatible

Shifting JSON Arrays in JavaScript - Changing Order with Ease

showing text from chosen selection with an additional element included in the output

XMLHTTPRequest is experiencing issues with displaying the progress bar

Utilizing Cordova for Windows 8.1 in Visual Studio 2015 for external image retrieval and insertion into img tag

Navigational menu routing with AngularJS2 using router link paths

Exploring the process of transforming a dynamic PDF into a static PDF using PHP or NodeJS

Converting an HTMLElement to a Node in Typescript

The error persists in Ajax requests despite the correct usage of json_encode and everything functioning correctly

How can we transfer parameters in JavaScript?

Guidance on implementing a source map in a Node.js VM

Using Fabric JS to update the image source of an element with a new URL

"Use Highcharts to visually compare the data from one month in two different years

What happens when 'grid' property is undefined in modal?