Dealing with the challenge of having multiple types in a single dynamic type within Typescript when using

Question

Dealing with the challenge of having multiple types in a single dynamic type within Typescript when using

I had the idea to use various types under a single 'dynamic' type, so I created:

export type ICandidate = 
  | ICandidatePlain
  | ICandidateTalented
  | ICandidateExperienced

The reason for this is because objects in the candidates array may have different properties from one another.

This ICandidate type worked well as candidates were just a part of the object:

export interface Process {
  id: string,
  name: string,
  candidates: ICandidate[]
}

The issue arose later when I needed to map all candidates to their specific component (which depends on type).

Here is a link to codesandbox, error on line #14

Is there a better way to make this work?

I suspect that the map function expects an array of objects with identical properties - or objects of type ICandidate but not mixed types. How can I make it work with mixed types inside a single array?

My current workaround is using any for the type like

data.map((candidate: any)=>{...}

, but I would prefer to find a solution with proper typing rather than just hacking around.

typescript dictionary dynamic types interface

Answer 1

Answer №1

Within your exampleObject.ts, the code snippet indicates:

//...
data: [
    {
      type: "plain",
      //...
    },
    {
      type: "talented",
      //...
    },
    {
      type: "experienced"
      //...
    }
  ]
...

An issue arises here as TypeScript automatically widens the type of type to string by default (rather than

"plain" | "talented" | "experienced"

) causing it to miss detecting your discriminator field. To address this, you must either declare a separate variable with annotation:

const data : ICandidate[] = [...];

or include as const throughout to prevent TypeScript from widening the type:

data: [
    {
      type: "plain" as const,
      //...
    },
    {
      type: "talented" as const,
      //...
    },
    {
      type: "experienced" as const,
      //...
    }
  ]

Answer 2

Within your exampleObject.ts, the code snippet indicates:

//...
data: [
    {
      type: "plain",
      //...
    },
    {
      type: "talented",
      //...
    },
    {
      type: "experienced"
      //...
    }
  ]
...

An issue arises here as TypeScript automatically widens the type of type to string by default (rather than

"plain" | "talented" | "experienced"

) causing it to miss detecting your discriminator field. To address this, you must either declare a separate variable with annotation:

const data : ICandidate[] = [...];

or include as const throughout to prevent TypeScript from widening the type:

data: [
    {
      type: "plain" as const,
      //...
    },
    {
      type: "talented" as const,
      //...
    },
    {
      type: "experienced" as const,
      //...
    }
  ]

Dealing with the challenge of having multiple types in a single dynamic type within Typescript when using

Answer №1

Similar questions

Having trouble with Angular's ActivatedRoute and paramMap.get('id')?

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

When selecting a MenuItem, only a ReactOwner has the ability to add a ref using addComponentAsRefTo(...)

In Typescript, is it correct to say that { [key: string]: any } is identical to { [key: number]: any }?

Detecting incorrect serialized data entries based on data types

Avoiding the insertion of duplicates in Angular 2 with Observables

Is it possible to design a Typescript type that only contains one property from a defined set and is indexable by that set as well?

Including a Javascript library (jsencrypt) in an Angular 2 application

Issue with Readonly modifier not functioning as expected in Angular/Typescript

How can you verify the correctness of imports in Typescript?

Accelerated repository uses TypeScript to compile a node application with dependencies managed within a shared workspace

Setting checkbox values using patchValue in Angular programming

Tips for customizing the `src/app/layout.tsx` file in Next.js 13

Passing parameters by reference in TypeScript

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Refine current attributes of an object in Typescript

Is it feasible to broaden an interface in Typescript without including a specific type?

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

Execute an npm script using a gulp task

What is the best way to create an HTML form on-the-fly from a JSON object?