Leveraging two data types for a single variable in Typescript

Question

Leveraging two data types for a single variable in Typescript

While transferring js typescript, I encountered a problem. The function below is designed to work with two different types of data, but I am seeing this error:

Property 'dateTime' does not exist on type 'Operation | OperationCreated'. 
Property 'dateTime' does not exist on type 'OperationCreated'

type DateTime = {
  date: string;
};

type Operation = {
  dateTime: DateTime;
};

type OperationCreated = {
  createdDate: string;
};

const sortByDate = (o1: Operation | OperationCreated, o2: Operation | OperationCreated) =>
  stringToMillisecond(o1.createdDate || o1.dateTime.date) - stringToMillisecond(o2.createdDate || o2.dateTime.date);

Just taking the initial steps in typescript, any help would be appreciated

typescript

Answer 1

Answer №1

One key issue with TypeScript is its interpretation of

o1.createdDate || o1.dateTime.date

as invalid due to a few reasons:

An important concern is that assuming o1.createdDate will only be falsy if it is undefined overlooks the fact that the empty string is also falsy. This oversight can lead to errors, as demonstrated in the example provided. Therefore, relying on a falsy check for potentially string values is not advisable in this context.
Furthermore, the TypeScript compiler requires that you narrow down the type of o1 to a specific type, such as OperationCreated, before reading a property value of a union type. This can be achieved by using a type guard mechanism such as the in operator:
```
"createdDate" in o1 ? o1.createdDate : o1.dateTime.date; // no error
```
This method effectively narrows down the type of o1 based on the presence of the "createdDate" property, avoiding potential errors during compilation.

To address these issues, a straightforward solution would be:

const sortByDate = (
  o1: Operation | OperationCreated,
  o2: Operation | OperationCreated
) =>
  stringToMillisecond("createdDate" in o1 ? o1.createdDate : o1.dateTime.date) -
  stringToMillisecond("createdDate" in o2 ? o2.createdDate : o2.dateTime.date);

Hopefully, this explanation clarifies the challenges you encountered. Best of luck with your TypeScript endeavors! Source Code Link

Answer 2

One key issue with TypeScript is its interpretation of

o1.createdDate || o1.dateTime.date

as invalid due to a few reasons:

An important concern is that assuming o1.createdDate will only be falsy if it is undefined overlooks the fact that the empty string is also falsy. This oversight can lead to errors, as demonstrated in the example provided. Therefore, relying on a falsy check for potentially string values is not advisable in this context.
Furthermore, the TypeScript compiler requires that you narrow down the type of o1 to a specific type, such as OperationCreated, before reading a property value of a union type. This can be achieved by using a type guard mechanism such as the in operator:
```
"createdDate" in o1 ? o1.createdDate : o1.dateTime.date; // no error
```
This method effectively narrows down the type of o1 based on the presence of the "createdDate" property, avoiding potential errors during compilation.

To address these issues, a straightforward solution would be:

const sortByDate = (
  o1: Operation | OperationCreated,
  o2: Operation | OperationCreated
) =>
  stringToMillisecond("createdDate" in o1 ? o1.createdDate : o1.dateTime.date) -
  stringToMillisecond("createdDate" in o2 ? o2.createdDate : o2.dateTime.date);

Hopefully, this explanation clarifies the challenges you encountered. Best of luck with your TypeScript endeavors! Source Code Link

Answer 3

Answer №2

The issue arises from ambiguity in the compiler regarding whether o1 and o2 belong to the Operation or OperationCreated types. To resolve this, consider implementing discriminated unions.

Here's a cleaner solution:

interface DateTime {
  date: string;
}

interface OperationDefault {
  type: 'default';
  dateTime: DateTime;
}

interface OperationCreated {
  type: 'created';
  createdDate: string;
}

type Operation = OperationDefault | OperationCreated;

const sortByDate = (o1: Operation, o2: Operation) => {
  const d1 = o1.type === 'default' ? o1.dateTime.date : o1.createdDate;
  const d2 = o2.type === 'default' ? o2.dateTime.date : o2.createdDate;

  return stringToMillisecond(d1) - stringToMillisecond(d2);
};

Answer 4

The issue arises from ambiguity in the compiler regarding whether o1 and o2 belong to the Operation or OperationCreated types. To resolve this, consider implementing discriminated unions.

Here's a cleaner solution:

interface DateTime {
  date: string;
}

interface OperationDefault {
  type: 'default';
  dateTime: DateTime;
}

interface OperationCreated {
  type: 'created';
  createdDate: string;
}

type Operation = OperationDefault | OperationCreated;

const sortByDate = (o1: Operation, o2: Operation) => {
  const d1 = o1.type === 'default' ? o1.dateTime.date : o1.createdDate;
  const d2 = o2.type === 'default' ? o2.dateTime.date : o2.createdDate;

  return stringToMillisecond(d1) - stringToMillisecond(d2);
};

Answer 5

Answer №3

Implementing Interfaces for Date and Operation Comparison

    interface DateInterface {
        date: string;
    }

    interface OperationInterface {
        dateTime: DateInterface;
    }

    interface OperationCreatedInterface {
        createdDate: string;
    }

    const sortOperationsByDate = (
        operation1: OperationInterface | OperationCreatedInterface,
        operation2: OperationInterface | OperationCreatedInterface
    ) =>
        stringToMilliseconds((operation1 as any).createdDate || (operation1 as any).dateTime.date) -
        stringToMilliseconds((operation2 as any).createdDate || (operation2 as any).dateTime.date);

Answer 6

Implementing Interfaces for Date and Operation Comparison

    interface DateInterface {
        date: string;
    }

    interface OperationInterface {
        dateTime: DateInterface;
    }

    interface OperationCreatedInterface {
        createdDate: string;
    }

    const sortOperationsByDate = (
        operation1: OperationInterface | OperationCreatedInterface,
        operation2: OperationInterface | OperationCreatedInterface
    ) =>
        stringToMilliseconds((operation1 as any).createdDate || (operation1 as any).dateTime.date) -
        stringToMilliseconds((operation2 as any).createdDate || (operation2 as any).dateTime.date);

Leveraging two data types for a single variable in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Tips on using class-validator @isArray to handle cases where only a single item is received from a query parameter

There was a TypeScript error found at line 313, character 9 in the file @mui/material/styles/experimental_extendTheme.d

Create a package themed with Material UI for export

component is receiving an incompatible argument in its props

Error occurred when sending form data while uploading a file

Oops! Looks like an issue has popped up: using require() of an ES module is not supported when using recharts in combination with next.js

Guide on switching locales from US to Japan in react-big-calendar

pnpm, vue, and vite monorepo: tackling alias path imports within a workspace package

What is causing the issue in locating the assert package for VS Code and TypeScript?

Alerts in Angular templates of inherited class in WebStorm

When executing prisma generate, an error of TypeError is thrown stating that the collection is

Determine the `overall` amount and adjust `overall` to equal `quantity * price` within a Typescript

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

Ensure that the Observable is properly declared for the item list

Create an array with individual key-type pairs for each generic element, then iterate through the array

Best practices for implementing "Event Sourcing" in the NestJS CQRS recipe

Verify that the Angular service has been properly initialized

The NgModel within the parent component is expected to mirror the state of the child component

When transitioning from component to page, the HTTP request fails to execute

Finding a date from a calendar with a readonly property in Playwright