What is the correct way to assign multiple types to a single entity in TypeScript?

Question

What is the correct way to assign multiple types to a single entity in TypeScript?

(code at the end)

While attempting to write section.full.link, I encountered the following error:

Property 'link' does not exist on type 'SectionSingle | SectionTitle | SectionHeaderMedia'. Property 'link' does not exist on type 'SectionSingle'.ts(2339)

I'm struggling to figure out how to resolve this error. Adding a ? after the full property or something similar did not help.

Here is the code snippet:

export type Section = {
    type: "single" | "double" | "title" | "headerMedia";
    full?: SectionSingle | SectionTitle | SectionHeaderMedia;
}


export type SectionSingle = {
    type: "text" | "media";
    content: any;
}

export type SectionTitle = {
    title: string;
}

export type SectionHeaderMedia = {
    link: string;
    alt: string;
}

var section: Section = {
    type: "headerMedia",
    full: {
        link: "/somelink",
        alt: "some alt text"
    }
}

const cond = section.type === "headerMedia" ? `${section.full.link}` : null

console.log(cond)

typescript

Answer 1

Answer №1

It appears that the current definition of Section is too broad, allowing for a value like

{type: "headerMedia", full: SectionSingle}

, where the properties full and type are not in agreement. Therefore, simply checking

section.type === "headerMedia"

does not guarantee that section.full contains a link property.

To enforce this constraint, you can define Section as a discriminated union type with type serving as the discriminant property. Here's one potential approach (though further requirements may apply):

export type Section =
    { type: "single", full: SectionSingle } |
    { type: "title", full: SectionTitle } |
    { type: "headerMedia", full: SectionHeaderMedia };

This defines a Section as one of these three possibilities. If type is checked and found to be "headerMedia", then the full property must correspond to a SectionHeaderMedia. With this setup, your verification will correctly pass without errors:

const cond = section.type === "headerMedia" ? `${section.full.link}` : null; // acceptable

Playground link to code

Answer 2

It appears that the current definition of Section is too broad, allowing for a value like

{type: "headerMedia", full: SectionSingle}

, where the properties full and type are not in agreement. Therefore, simply checking

section.type === "headerMedia"

does not guarantee that section.full contains a link property.

To enforce this constraint, you can define Section as a discriminated union type with type serving as the discriminant property. Here's one potential approach (though further requirements may apply):

export type Section =
    { type: "single", full: SectionSingle } |
    { type: "title", full: SectionTitle } |
    { type: "headerMedia", full: SectionHeaderMedia };

This defines a Section as one of these three possibilities. If type is checked and found to be "headerMedia", then the full property must correspond to a SectionHeaderMedia. With this setup, your verification will correctly pass without errors:

const cond = section.type === "headerMedia" ? `${section.full.link}` : null; // acceptable

Playground link to code

Answer 3

Answer №2

To ensure that a section is a header media type, you must implement the type guard isSectionHeaderMedia

function isSectionHeaderMedia(section: unknown): section is SectionHeaderMedia {
    return _.isObject(section) && 'link' in section;
}

_ refers to lodash library.

isSectionHeaderMedia(section) && section.type === "headerMedia"
?
<div key={index} className="w-full">
    <Image
        src={section.full.link}
    />
</div>
:   null

Answer 4

To ensure that a section is a header media type, you must implement the type guard isSectionHeaderMedia

function isSectionHeaderMedia(section: unknown): section is SectionHeaderMedia {
    return _.isObject(section) && 'link' in section;
}

_ refers to lodash library.

isSectionHeaderMedia(section) && section.type === "headerMedia"
?
<div key={index} className="w-full">
    <Image
        src={section.full.link}
    />
</div>
:   null

Answer 5

Answer №3

A comprehensive Section can be created to handle various scenarios and generate appropriate types as needed.

By defining a union type of all possible sections, you gain the flexibility to use them in different ways.

type HalfSection = {

}

type SectionSingleText = {

}

type SectionSingleMedia = {

}

type SectionTitle = {
    title: string;
}
type SectionHeaderMedia = {
    link: string;
    alt: string;
}

type SectionSingle = {
    type: "text" | "media"
    content: SectionSingleText | SectionSingleMedia
}

type SectionType = "single" | "double" | "title" | "headerMedia";

type SectionGeneric<ST extends SectionType> = {
    type: ST;
    full: ST extends "single" ? SectionSingle : ST extends "title" ? SectionTitle :  ST extends "headerMedia" ? SectionHeaderMedia : never;
    left?: HalfSection;
    right?: HalfSection;
}

type Section = SectionGeneric<"single"> | SectionGeneric<"double"> | SectionGeneric<"title"> | SectionGeneric<"headerMedia">

const a: Section = {
    type: "headerMedia",
    full: {
        link: "link",
        alt: "alt"
    }
};


const displayContent = (section: Section): void => {
    section.type === "headerMedia" && console.log(section.full.link)
}

displayContent(a)

Please note:

Some types had to be declared for this setup to function properly.
Alternatively, you could create a union type from the start.

Explore the code further on the playground.

For more information, check out Discriminated Unions.

Answer 6

A comprehensive Section can be created to handle various scenarios and generate appropriate types as needed.

By defining a union type of all possible sections, you gain the flexibility to use them in different ways.

type HalfSection = {

}

type SectionSingleText = {

}

type SectionSingleMedia = {

}

type SectionTitle = {
    title: string;
}
type SectionHeaderMedia = {
    link: string;
    alt: string;
}

type SectionSingle = {
    type: "text" | "media"
    content: SectionSingleText | SectionSingleMedia
}

type SectionType = "single" | "double" | "title" | "headerMedia";

type SectionGeneric<ST extends SectionType> = {
    type: ST;
    full: ST extends "single" ? SectionSingle : ST extends "title" ? SectionTitle :  ST extends "headerMedia" ? SectionHeaderMedia : never;
    left?: HalfSection;
    right?: HalfSection;
}

type Section = SectionGeneric<"single"> | SectionGeneric<"double"> | SectionGeneric<"title"> | SectionGeneric<"headerMedia">

const a: Section = {
    type: "headerMedia",
    full: {
        link: "link",
        alt: "alt"
    }
};


const displayContent = (section: Section): void => {
    section.type === "headerMedia" && console.log(section.full.link)
}

displayContent(a)

Please note:

Some types had to be declared for this setup to function properly.
Alternatively, you could create a union type from the start.

Explore the code further on the playground.

For more information, check out Discriminated Unions.

Answer 7

Answer №4

To ensure type safety, you can utilize a type assertion

const condition = segment.kind === "bannerImage"
  ? `${(segment.full as SegmentBannerImage).url}`
  : null

For runtime validation, consider converting the SegmentBannerImage type into a class and introduce an additional check with the instanceof operator within an if statement

export class SegmentBannerImage {
  url = '';
  caption = '';
}

segment1.kind === 'bannerImage' && segment1.full instanceof SegmentBannerImage
    ? segment1.full.url
    : null;

Answer 8

To ensure type safety, you can utilize a type assertion

const condition = segment.kind === "bannerImage"
  ? `${(segment.full as SegmentBannerImage).url}`
  : null

For runtime validation, consider converting the SegmentBannerImage type into a class and introduce an additional check with the instanceof operator within an if statement

export class SegmentBannerImage {
  url = '';
  caption = '';
}

segment1.kind === 'bannerImage' && segment1.full instanceof SegmentBannerImage
    ? segment1.full.url
    : null;

What is the correct way to assign multiple types to a single entity in TypeScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for resolving the ExtPay TypeError when using Typscript and Webpack Bundle

Bring in personalized tag to TypeScript

Consolidate multiple sorting functions into a single function to effectively sort by column

Creating robust unit tests for Node.js applications with the help of redis-mock

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Modify one specific variable within my comprehensive collection on Firebase Firestore

When multiple input fields with an iterative design are using the same onChange() function, the specific event.target.values for each input

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

Implementing a new field in a Node.js model using MongoDB

Changes made to an array in a called method using TypeScript do not appear in the calling function

Using Kendo's Angular Grid to link data sources

How to compare and filter items from two arrays using TypeScript

What is the best way to create a distinct slug using TypeScript and mongoose?

Tips for resolving conflicts between sequelize and angular within a lerna monorepo using typescript

The base URL specified in the tsconfig file is causing the absolute path to malfunction

Integrating Constant Contact API into a Next.js application

encountered an issue when testing a dynamic route in Next.js with postman

When ts-loader is used to import .json files, the declaration files are outputted into a separate

What is the method for opening the image gallery in a Progressive Web App (PWA)?

When using TypeScript with Jest or Mocha, an issue arises where the testing frameworks are unable to read JavaScript dependencies properly, resulting in an error message saying "unexpected token