Utilizing an if statement with a TypeScript DeepMap Union Type

Question

Utilizing an if statement with a TypeScript DeepMap Union Type

I am attempting to create a Union type that includes optional fields in its structure. Here are the types I have defined:

export type StartEndType = {
  start_date: string;
  end_date: string;
};

export type PayrollContract = StartEndType & {
  type: 'ON_PAYROLL';
  yearly_holidays: number;
};

export type FreelanceContract = StartEndType & {
  type: 'FREELANCE';
  hourly_rate: number;
};

export type Contract = PayrollContract | FreelanceContract;

In my component, it is implemented like this:

{contractType === 'ON_PAYROLL' ? (
  <Number name="yearly_holidays"  />
) : contractType === 'FREELANCE' && (
  <Number name="hourly_rate" />
)}

When I hover over the contract, it correctly identifies it as either ON_PAYROLL or FREELANCE. However, I encounter a DeepMap error within my component.

Is this not supported by TypeScript by default?

Property 'yearly_holidays' does not exist on type 'DeepMap<PayrollContract, FieldError> | DeepMap<FreelanceContract, FieldError>'.
  Property 'yearly_holidays' does not exist on type 'DeepMap<FreelanceContract, FieldError>'.

How can this issue be resolved? Thank you in advance.

javascript typescript if-statement union-types

Answer 1

Answer №1

Do you have the code snippet for the Number component? It seems like there might be an issue with how you are displaying the number by name. I was able to successfully compile and run the TypeScript code provided above in the TS playground.

const renderPayField = (contract: Contract) => {
  if (contract.type === 'ON_PAYROLL') {
     return <Number name="yearly_holidays" />;
  }
  if (contract.type === 'FREELANCE') {
     return <Number name="hourly_rate" />
  }
  return null;
};

Furthermore, I made some updates to the TypeScript code to utilize interfaces and readonly properties for enhanced readability

export interface StartEndDate {
  start_date: string;
  end_date: string;
};

export interface PayrollContract extends StartEndDate {
  readonly type: 'ON_PAYROLL';
  yearly_holidays: number;
};

export interface FreelanceContract extends StartEndDate {
  readonly type: 'FREELANCE';
  hourly_rate: number;
};

export type Contract = PayrollContract | FreelanceContract;

Answer 2

Do you have the code snippet for the Number component? It seems like there might be an issue with how you are displaying the number by name. I was able to successfully compile and run the TypeScript code provided above in the TS playground.

const renderPayField = (contract: Contract) => {
  if (contract.type === 'ON_PAYROLL') {
     return <Number name="yearly_holidays" />;
  }
  if (contract.type === 'FREELANCE') {
     return <Number name="hourly_rate" />
  }
  return null;
};

Furthermore, I made some updates to the TypeScript code to utilize interfaces and readonly properties for enhanced readability

export interface StartEndDate {
  start_date: string;
  end_date: string;
};

export interface PayrollContract extends StartEndDate {
  readonly type: 'ON_PAYROLL';
  yearly_holidays: number;
};

export interface FreelanceContract extends StartEndDate {
  readonly type: 'FREELANCE';
  hourly_rate: number;
};

export type Contract = PayrollContract | FreelanceContract;

Utilizing an if statement with a TypeScript DeepMap Union Type

Answer №1

Similar questions

Is it time to ditch daylight saving time - am I managing my dates and times correctly?

Ways to recover information that is not typically found

Linking together or organizing numerous JavaScript function executions in instances where the sequence of actions is crucial

Restricting enum type to only one member

Retrieve the targeted row from the table and then employ a function

How can I make the arrows work on a secondary slider with EasySlider1.7?

Error encountered while attempting to import a Bootstrap JavaScript file in webpack

"Exploring the power of NodeJS with createServer, dealing with

What is the best way to retrieve information from a database using JSON with PHP, JQUERY, and

Link a PHP variable to a JavaScript variable

Next.js Content Switching: A Step-by-Step Guide

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

Issues with integrating the jsPDF package into a JavaScript project

angular data binding returning the identifier instead of the content

I made a mistake with my git repository. Should I try to fix it or just start fresh?

Incorporating a CSS Module into a conditional statement

Obtain content from a div element using jQuery

AngularJS remove a row from a table disrupts the formatting

Invoke Office script from beyond MS Excel WebApp

Booking.com's embedded content is experiencing display issues