Exploring methods to clarify the type being utilized in TypeScript

Question

Exploring methods to clarify the type being utilized in TypeScript

I have a function that validates data for Kushki forms

export const validateKushkiForm = (type: KUSHKI_METHODS, kushkiData: KushkiCashType | 
KushkiTransferType)
 => {

    const errors = [];

    if (type === KUSHKI_METHODS.CASH) {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else if (type === KUSHKI_METHODS.TRANSFER) {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

For the type KushkiCashType, the properties include:

firstName: string;
lastName: string;
documentNumber: string;

For the type KushkiTransferType, it only has the property:

documentNumber: string;

Error message: 'Property 'firstName' does not exist on type 'KushkiCashType | KushkiTransferType'.
  Property 'firstName' does not exist on type 'KushkiTransferType'.ts(2339)'

The issue arises because kushkiData can be of type KushkiCashType or KushkiTransferType. How can this error be resolved?

typescript

Answer 1

Answer №1

To determine the type, it is necessary to examine the object at hand. Establishing the type of b solely based on the value of a is not feasible.

One common approach is to define it as a property of the object:

type KushkiCashType = {
    type: 'cash';
    firstName: string;
    lastName: string;
    documentNumber: string;
}

type KushkiTransferType = {
    type: 'transfer';
    documentNumber: string; 
}

export const validateKushkiForm = (kushkiData: KushkiCashType | 
KushkiTransferType) => {
    const errors = [];

    if (kushkiData.type === 'cash') {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else if (kushkiData.type === 'transfer') {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

An alternative method closer to your original idea involves testing the properties of the object using in. In this scenario, distinguishing between types with and without firstName can be done through this check.

type KushkiCashType = {
    firstName: string;
    lastName: string;
    documentNumber: string;
}

type KushkiTransferType = {
    documentNumber: string; 
}

export const validateKushkiForm = (kushkiData: KushkiCashType | 
KushkiTransferType) => {

    const errors = [];

    if ("firstName" in kushkiData) {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

Answer 2

To determine the type, it is necessary to examine the object at hand. Establishing the type of b solely based on the value of a is not feasible.

One common approach is to define it as a property of the object:

type KushkiCashType = {
    type: 'cash';
    firstName: string;
    lastName: string;
    documentNumber: string;
}

type KushkiTransferType = {
    type: 'transfer';
    documentNumber: string; 
}

export const validateKushkiForm = (kushkiData: KushkiCashType | 
KushkiTransferType) => {
    const errors = [];

    if (kushkiData.type === 'cash') {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else if (kushkiData.type === 'transfer') {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

An alternative method closer to your original idea involves testing the properties of the object using in. In this scenario, distinguishing between types with and without firstName can be done through this check.

type KushkiCashType = {
    firstName: string;
    lastName: string;
    documentNumber: string;
}

type KushkiTransferType = {
    documentNumber: string; 
}

export const validateKushkiForm = (kushkiData: KushkiCashType | 
KushkiTransferType) => {

    const errors = [];

    if ("firstName" in kushkiData) {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

Answer 3

Answer №2

If you're dealing with a situation like this, one approach you could take is to utilize type extension.

enum PAYMENT_METHODS {
  CASH,
  TRANSFER,
}

type CashPaymentType = {
  firstName: string
  lastName: string
  documentNumber: string
}
type TransferPaymentType = {
  documentNumber: string
}

export const validatePaymentForm = (
  method: PAYMENT_METHODS,
  paymentData: CashPaymentType & TransferPaymentType
) => {
  const errors: string[] = []

  if (method === PAYMENT_METHODS.CASH) {
    !paymentData.firstName && errors.push("firstName")
    !paymentData.lastName && errors.push("lastName")
    !paymentData.documentNumber && errors.push("documentNumber")
  } else if (method === PAYMENT_METHODS.TRANSFER) {
    !paymentData.documentNumber && errors.push("documentNumber")
  }

  return errors
}

TS playground

Answer 4

If you're dealing with a situation like this, one approach you could take is to utilize type extension.

enum PAYMENT_METHODS {
  CASH,
  TRANSFER,
}

type CashPaymentType = {
  firstName: string
  lastName: string
  documentNumber: string
}
type TransferPaymentType = {
  documentNumber: string
}

export const validatePaymentForm = (
  method: PAYMENT_METHODS,
  paymentData: CashPaymentType & TransferPaymentType
) => {
  const errors: string[] = []

  if (method === PAYMENT_METHODS.CASH) {
    !paymentData.firstName && errors.push("firstName")
    !paymentData.lastName && errors.push("lastName")
    !paymentData.documentNumber && errors.push("documentNumber")
  } else if (method === PAYMENT_METHODS.TRANSFER) {
    !paymentData.documentNumber && errors.push("documentNumber")
  }

  return errors
}

TS playground

Answer 5

Answer №3

Develop a fresh concept that combines the qualities of both varieties.

type CombinedType = KushkiCashType | KushkiTransferType;

export const checkKushkiForm = (method: KUSHKI_METHODS, data: CombinedType) => {
....

It appears to be set up correctly, but here's a suggestion that could assist.

Answer 6

Develop a fresh concept that combines the qualities of both varieties.

type CombinedType = KushkiCashType | KushkiTransferType;

export const checkKushkiForm = (method: KUSHKI_METHODS, data: CombinedType) => {
....

It appears to be set up correctly, but here's a suggestion that could assist.

Exploring methods to clarify the type being utilized in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

Using TypeScript to modify the attributes of an SCSS element

Discovering the power of Angular 2 with ngrx while putting my Reducer to the

How can you typically verify the type of an object variable in TypeScript?

Issues with Vercel's JavaScript Environment Variables Accessibility

Exploring the Depths of JSON Arrays within Typescript

retrieve an object with enum keys that are indexed

Encountering an issue when attempting to save an excel file in Angular 8, receiving an error message that states "

Create a Referral Program page within a swapping interface similar to the functionalities found in platforms like PancakeSwap, PantherSwap, and

Guide for configuring a server to exclusively render Vue components

Property of object (TS) cannot be accessed

Incorrect deduction of the argument type for a higher-order function

Make sure that the input for a function is a valid key within a specific interface, and that the corresponding value in the interface is

Compilation error in VueJS: missing dependency detected

Using a single Material Autocomplete input to handle two values within Angular

Creating a declaration file for a library's entry point involves outlining the structure and types

TypeScript is unaware that a component receives a necessary prop from a Higher Order Component (HOC)

Error encountered while downloading file from S3 on NextJs due to network issue

What's Going on with My Angular Dropdown Menu?

Transfer my testing utilities from React Router version 5 to version 6