What is the process of creating a TypeScript interface that accommodates various schemas?

Question

What is the process of creating a TypeScript interface that accommodates various schemas?

Trying to establish a Consume type with two different payloads.

interface Eat {
  category: 'meat' | 'vegetable'
}
interface Drink {
  size: string
}
interface Consume {
   type: 'eat' | 'drink'
   payload: Eat | Drink
}

Encountering issues with if statements

function doSomething(c: Consume): string {
   if (c.type === 'Eat') {
      const e: Eat = c.payload            <----- ERRORS
      return e.category
   }
   return ''
}

Errors triggered:

Type Eat | Drink is not assignable to type 'Drink'. Property 'size' is missing in type 'Eat' but required in type 'Drink'. ts(2322)

Questioning the feasibility of having two distinct schemas within a TypeScript interface Consume.

typescript

Answer 1

Answer №1

Here is a way to accomplish this task.

interface Cook {
  option: 'grill' | 'steam'
}
interface Brew {
  method: string
}
interface Prepare {
   choice: 'cook' | 'brew'
   details: Cook | Brew
}

function doTask(p: Prepare): string {
   if (p.choice === 'cook') {
      const m: Cook = p.details as Cook;
      return m.option;
   }
   return ''
}

Answer 2

Here is a way to accomplish this task.

interface Cook {
  option: 'grill' | 'steam'
}
interface Brew {
  method: string
}
interface Prepare {
   choice: 'cook' | 'brew'
   details: Cook | Brew
}

function doTask(p: Prepare): string {
   if (p.choice === 'cook') {
      const m: Cook = p.details as Cook;
      return m.option;
   }
   return ''
}

Answer 3

Answer №2

After some rearranging, I was able to update the schema in TypeScript without needing X as typeY thanks to the format shown below.

type Action = Eat | Drink

interface Eat {
  type: 'eat'
  payload: EatPayload
}
interface EatPayload {
   category: 'meat' | 'vegetable'
}

interface Drink {
  type: 'drink'
  payload: DrinkPayload
}
interface DrinkPayload {
  size: string
}

function doSomething(action: Action): string {
   if (action.type === 'eat') {
      return action.payload.category;
   }
   return ''
}

Answer 4

After some rearranging, I was able to update the schema in TypeScript without needing X as typeY thanks to the format shown below.

type Action = Eat | Drink

interface Eat {
  type: 'eat'
  payload: EatPayload
}
interface EatPayload {
   category: 'meat' | 'vegetable'
}

interface Drink {
  type: 'drink'
  payload: DrinkPayload
}
interface DrinkPayload {
  size: string
}

function doSomething(action: Action): string {
   if (action.type === 'eat') {
      return action.payload.category;
   }
   return ''
}

What is the process of creating a TypeScript interface that accommodates various schemas?

Answer №1

Answer №2

Similar questions

Argument typed with rest properties in Typescript objects

Performing an Axios POST request in a React Native and React app using JSON.stringify and Blob functionality

Learn how to prevent the rendering of a specific section of code using JavaScript/TypeScript, similar to the functionality of *ngIf in Angular

Developers can leverage Node4 and Gulp to seamlessly integrate TypeScript with EcmaScript2015 in their

Having trouble with the lodash find function in my Angular application

Issue with retrieving the positions of two numbers in an array

Is there a way to attach a Blob/File array to formData in typescript?

Issue encountered with combineLatest following upgrade of rxjs from version 6.x to 7.x

When implementing a custom uploadHandler, the PrimeNG File Upload Progress may not accurately reflect the upload progress

Encountering a ReactJS and TypeScript issue with error code TS2322: Unable to assign type to 'IntrinsicAttributes & IntrinsicClassAttributes'

I'm curious, can you simplify this code snippet by incorporating a lambda function?

Delete information based on its unique identifier

Angular function triggered by clicking that takes two parameters

What is the process for calling subjects dynamically in a service?

Ionic 4 - Best practices for handling asynchronous data with multiple observables

Troubleshooting compilation issues when using RxJS with TypeScript

Is there a way to alter the value of an Observable using Knockout and Typescript within its subscription?

What is the best way to export an overloaded function in TypeScript?

Display or conceal password text with Nativescript

When incorporating @pokusew/pcsclite into an Angular2/Electron project, a TypeError is triggered