There is no union property present on this union type

Question

There is no union property present on this union type

I am facing an issue with TypeScript:

type Foo = {
  a: number
}

type Bar = {
  b: number
}

type Props = {
  object?: Foo | Bar | null;
  keys?: (keyof Foo)[] | (keyof Bar)[];
}

function myFunction({ object, keys = ['a'] }: Props) {
  const values = keys.map(key => object && object[key]);
  // Element implicitly has an 'any' type because expression of type '"a" | "b"' can't be used to index type 'Foo | Bar'.
  // Property 'b' does not exist on type 'Foo | Bar'.
}

What approach would you take to define types for a situation where the inputs can be either of type Foo or Bar?

I am working on creating an abstraction that can accept two objects and specific keys to extract from those objects. The input objects could be of type A or C. They may have varying keys, but the user is expected to provide the corresponding keys based on the object passed.

typescript

Answer 1

Answer №1

Props can be improved by specifying the props of Foo and Bar separately.

You could implement a generic solution like this:

type Props<T> = {
  object?: T | null;
  keys?: (keyof T)[];
};

function myFunction<T extends Foo | Bar>({ object, keys = ['a'] as (keyof T)[] }: Props<T>) {
  const values = keys.map(key => object && object[key]);
}

If you plan on returning something from this function, consider tightening your API to avoid requiring users to perform additional checks.

Answer 2

Props can be improved by specifying the props of Foo and Bar separately.

You could implement a generic solution like this:

type Props<T> = {
  object?: T | null;
  keys?: (keyof T)[];
};

function myFunction<T extends Foo | Bar>({ object, keys = ['a'] as (keyof T)[] }: Props<T>) {
  const values = keys.map(key => object && object[key]);
}

If you plan on returning something from this function, consider tightening your API to avoid requiring users to perform additional checks.

Answer 3

Answer №2

My recommendation would be to use a discriminated union.

type Car = {
 type: "car";
 doors: number
}

type Truck = {
  type: "truck";
  payload: number
}

type Vehicle = Car | Truck;

function calculateValue(vehicle: Vehicle) {
  const result = vehicle.type == "car"? vehicle.doors : vehicle.payload;
}

Answer 4

My recommendation would be to use a discriminated union.

type Car = {
 type: "car";
 doors: number
}

type Truck = {
  type: "truck";
  payload: number
}

type Vehicle = Car | Truck;

function calculateValue(vehicle: Vehicle) {
  const result = vehicle.type == "car"? vehicle.doors : vehicle.payload;
}

There is no union property present on this union type

Answer №1

Answer №2

Similar questions

Is it considered beneficial to use Observable as a static class member?

What is the best way to incorporate sturdy data types into the alternative function for this switch statement

Verifying TypeScript Class Instances with Node Module Type Checking

Issue: This error occurs when attempting to double click on the diagram or a node but the show function for c is not recognized

Fatal error: The main module could not be located. Please check the path `/src/test.ts` for resolution errors

Dealing with asynchronous operations in a pipeline with fp-ts

Exploring Function Overriding in TypeScript

Trouble arises when trying to import Jest with Typescript due to SyntaxError: Import statement cannot be used outside a module

When implementing JSS with React and TypeScript, certain CSS properties may encounter a `type is unassignable` error

What is the best approach in Typescript to ensure type understanding when importing using require()?

What is the correct way to construct an object in TypeScript while still taking types into account?

When a list item is clicked, the 'active' class is added to it and removed from its sibling elements in Angular 8

Using TypeScript with Angular-UI Modals

A Typescript interface featuring a method named 'create'

Newest preact and typescript packages causing issues with type validation

How to generate a new array in Angular by combining elements from two existing arrays for common items

Issue - Unrecognized listen EADDRINUSE :::5432 detected in Windows Command Prompt

Error encountered in Ngrx data service when using Angular resolver

Listening for keypress events on a div element using React

What is the most effective way to eliminate all values in an object key array except for one specific value?