What steps can be taken to address a TypeScript error when a function's parameters may be of two different types?

Question

What steps can be taken to address a TypeScript error when a function's parameters may be of two different types?

I'm facing an issue with a simple function that retrieves the address as a string

interface AddressType1 {
  city: string | null; 
  state: string | null;
  postalCode: string | null;
}

interface AddressType2 {
  city: string | null; 
  region: string | null;
  postalCode: string | null;
}

export const getAddressString = (
  address: AddressType1 | AddressType2 | null,
): string => {
  if (address != null) {
    return `${address.city ?? ""}, ${address.region ?? address.state ?? ""} ${address.postalCode ?? ""}`;
  }
  return "";
};

However, TypeScript is throwing an error stating

Property 'region' does not exist on type 'RoadsideLocation'

and

Property 'state' does not exist on type 'LocationGeocodedAddress'

.

javascript typescript

Answer 1

Answer №1

Are you searching for the intersection symbol, &, in programming?

  Example: ( TypeA & TypeB )| null,

Answer 2

Are you searching for the intersection symbol, &, in programming?

  Example: ( TypeA & TypeB )| null,

Answer 3

Answer №2

Consider the following scenario:

interface LocationType1 {
    city: string | null;
    state: string | null;
    postalCode: string | null;
}

interface LocationType2 {
    city: string | null;
    region: string | null;
    postalCode: string | null;
}

type AddressUnion = LocationType1 | LocationType2

const hasPropertyCheck = <Obj, Prop extends string>(obj: Obj, prop: Prop)
    : obj is Obj & Record<Prop, unknown> =>
    Object.prototype.hasOwnProperty.call(obj, prop);

const checkIfType1 = (location: AddressUnion): location is LocationType1 => hasPropertyCheck(location, 'region');

type PossiblyNull<T> = null | T

const isNullOrNot = (str: PossiblyNull<string>): str is null => str === null

const generateAddressString = (city: PossiblyNull<string>, postalCode: PossiblyNull<string>) => (stateRegion: PossiblyNull<string>) =>
    [city, stateRegion, postalCode].reduce<string>((acc, elem) => isNullOrNot(elem) ? acc : `${acc},${elem}`, '');

export const createFormattedAddress = (
    location: AddressUnion,
) => {
    const { city, postalCode } = location;
    const partialResult = generateAddressString(city, postalCode)

    if (checkIfType1(location)) {
        return partialResult(location.state)


    }
    return partialResult(location.region)

}

Avoid invoking the function when the argument is null.

generateAddressString involves partial application.

If dealing with a union, consider using typeguards

Answer 4

Consider the following scenario:

interface LocationType1 {
    city: string | null;
    state: string | null;
    postalCode: string | null;
}

interface LocationType2 {
    city: string | null;
    region: string | null;
    postalCode: string | null;
}

type AddressUnion = LocationType1 | LocationType2

const hasPropertyCheck = <Obj, Prop extends string>(obj: Obj, prop: Prop)
    : obj is Obj & Record<Prop, unknown> =>
    Object.prototype.hasOwnProperty.call(obj, prop);

const checkIfType1 = (location: AddressUnion): location is LocationType1 => hasPropertyCheck(location, 'region');

type PossiblyNull<T> = null | T

const isNullOrNot = (str: PossiblyNull<string>): str is null => str === null

const generateAddressString = (city: PossiblyNull<string>, postalCode: PossiblyNull<string>) => (stateRegion: PossiblyNull<string>) =>
    [city, stateRegion, postalCode].reduce<string>((acc, elem) => isNullOrNot(elem) ? acc : `${acc},${elem}`, '');

export const createFormattedAddress = (
    location: AddressUnion,
) => {
    const { city, postalCode } = location;
    const partialResult = generateAddressString(city, postalCode)

    if (checkIfType1(location)) {
        return partialResult(location.state)


    }
    return partialResult(location.region)

}

Avoid invoking the function when the argument is null.

generateAddressString involves partial application.

If dealing with a union, consider using typeguards

What steps can be taken to address a TypeScript error when a function's parameters may be of two different types?

Answer №1

Answer №2

Similar questions

Unlock the key to connecting the output of one observable to another in rxjs

Error: AJAX response shows as NaN, indicating that the requested resource was not found

The code snippet contained within the Highlight component is rendered in a continuous, unbroken line

Is there a way to extract the text that lies between two closed HTML

What is the best way to set up prettier in VSCODE so that it organizes jsx attributes across multiple lines?

struggling to determine the connection status between tables (Many-to-many or one-to-one)

What are the steps for sending a POST request with custom headers?

What is the best way to limit the length of text in a div if it surpasses a

Error encountered when attempting to display a particular user with a specific _id in MongoDB, Node, and React: Failed to convert value "undefined" to ObjectId in the "user" model

View real-time data in Vuejs 3 as it executes

Error message encountered: ReferenceError - The subcommand specified in Discord.js Slash Command function is undefined

Adding elements to an array in Node.js

modified a file using express framework

Ensure that you wait for all asynchronous $http requests to finish in AngularJS before continuing

I am interested in extracting information from the Firebase real-time database and showcasing it on my HTML webpage

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

Transmitting information from the front-end Fetch to the back-end server

Automatically adjusting the locale settings upon importing the data

Using an AngularJS ng-repeat alias expression with multiple filters

Determining the necessary data to send via ajax for a particular issue