What is the best way to define the type of an object when the Key is already known?

Question

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type?

In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email"

const payload = '{"type":"sms","destination":123}'

type PayloadType = 'sms' | 'email'

interface BasePayload {
    type: PayloadType
}

interface SmsPayload extends BasePayload {
    destination: number
}

interface EmailPayload extends BasePayload {
    destination: string
}

const data: SmsPayload | EmailPayload = JSON.parse(payload)

Thanks in advance!

*PS: I am aware that phone numbers are not actual numbers... this is purely for demonstration purposes.

typescript

Answer 1

Answer №1

Leaving behind an inheritance can be a difficult decision, but in this case, it is not necessary.

All you need to do is create two different types that share a common discriminating field called type:

interface TextPayload {
    type: 'text'
    content: string
}

interface ImagePayload {
    type: 'image'
    url: string
}

You can then create a union type by combining these two:

type PayloadCombo = ImagePayload | TextPayload

Now, you can easily parse the JSON payload from the backend like this:

const info: PayloadCombo = JSON.parse(payload) // assuming data integrity

And use the shared discriminator field to distinguish between the types:

if (info.type === 'text'){
    // When inside this block, `info` will be of type TextPayload
}

Answer 2

Leaving behind an inheritance can be a difficult decision, but in this case, it is not necessary.

All you need to do is create two different types that share a common discriminating field called type:

interface TextPayload {
    type: 'text'
    content: string
}

interface ImagePayload {
    type: 'image'
    url: string
}

You can then create a union type by combining these two:

type PayloadCombo = ImagePayload | TextPayload

Now, you can easily parse the JSON payload from the backend like this:

const info: PayloadCombo = JSON.parse(payload) // assuming data integrity

And use the shared discriminator field to distinguish between the types:

if (info.type === 'text'){
    // When inside this block, `info` will be of type TextPayload
}

Answer 3

Answer №2

When looking at your example, it's clear that both

{"type":"sms","destination":123}

and

{"type":"email","destination":123}

are categorized under the same type SmsPayload.

To resolve this overlap, we need to first adjust the interface definitions:

const payload = '{"type":"sms","destination":123}';

type PayloadType = "sms" | "email";

interface BasePayload {
  type: PayloadType;
}

interface SmsPayload extends BasePayload {
  type: "sms";
  destination: number;
}

interface EmailPayload extends BasePayload {
  type: "email";
  destination: string;
}

Now, the only check required is for the type key:

const data: SmsPayload | EmailPayload = JSON.parse(payload);

if (data.type === "email") {
  const email = data; // vscode will infer type email: EmailPayload.
}

It's important to note that this assumes the payload string is correctly formatted. If there is a mistake, such as assigning a string value to the destination of an SMS, like in

const payload = '{"type":"sms","destination":"123"}';

, TypeScript won't catch it during compilation because it checks code before runtime.

For runtime validation, I recommend using the library zod.

Answer 4

When looking at your example, it's clear that both

{"type":"sms","destination":123}

and

{"type":"email","destination":123}

are categorized under the same type SmsPayload.

To resolve this overlap, we need to first adjust the interface definitions:

const payload = '{"type":"sms","destination":123}';

type PayloadType = "sms" | "email";

interface BasePayload {
  type: PayloadType;
}

interface SmsPayload extends BasePayload {
  type: "sms";
  destination: number;
}

interface EmailPayload extends BasePayload {
  type: "email";
  destination: string;
}

Now, the only check required is for the type key:

const data: SmsPayload | EmailPayload = JSON.parse(payload);

if (data.type === "email") {
  const email = data; // vscode will infer type email: EmailPayload.
}

It's important to note that this assumes the payload string is correctly formatted. If there is a mistake, such as assigning a string value to the destination of an SMS, like in

const payload = '{"type":"sms","destination":"123"}';

, TypeScript won't catch it during compilation because it checks code before runtime.

For runtime validation, I recommend using the library zod.

What is the best way to define the type of an object when the Key is already known?

Answer №1

Answer №2

Similar questions

Issue with TypeORM @BeforeInsert causing a field in Entity not to be populated with value

Encountered an error while trying to load config.ts file because of an issue

In the else-branch, a type guard of "not null" results in resolving to "never."

Unable to create a loop within the constructor to assign API values

Tips for converting a date string to a date object and then back to a string in the same format

Steps to globally modify the font in Ionic

Retrieving Vue data from parent components in a nested getter/setter context

Navigating the complexities of managing numerous checkboxes in React

How can Material UI Textfield be configured to only accept a certain time format (hh:mm:ss)?

Accessing properties within nested objects in a class

Adding an anchor tag to an ngx-datatable-column can be done by utilizing the properties

After integrating React Query into my project, all my content vanishes mysteriously

Encountering Duplicate Identifier Error while working on Angular 2 Typescript in Visual Studio Code

What is the best way to combine the attributes of multiple objects within a union type?

Transforming an object in TypeScript to another object while retaining the properties of the original type

Guide to Making a Basic TypeScript Metadata Tag in Your Code

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Can sweetalert2 be used as a tooltip?

Unable to locate dependencies while testing the react package locally

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the