Choose between Typescript type a and Typescript type b

Question

Choose between Typescript type a and Typescript type b

I am currently working with two interfaces:

interface IComment extends IData {
  comment: string;
}
interface IHistory extends IData{
  differences: any[];
  timeStamp: number;
}

Both of these interfaces extend another interface:

interface IData {
  user: string;
  date: Moment | string;
  isHistory: boolean;
}

Now, the issue arises when dealing with an array containing elements of both IComment and IHistory.

const data: Array<IHistory | IComment> = [...someHistoryArray, ...someCommentArray]

When trying to map over this array and access the timeStamp property, errors occur due to TypeScript not recognizing the specific types.

data.map((entry: IHistory | IComment) => {
  if(entry.isHistory) {
    entry.timeStamp 
    // TS2339: Property 'timeStamp' does not exist on type 'IHistory | IComment'. Property 'differences' does not exist on type 'IComment'.
  } else {
    entry.comment
    // TS2339: Property 'comment' does not exist on type 'IHistory | IComment'. Property 'comment' does not exist on type 'IHistory'.
  }
})

I have found two potential solutions, but they are not entirely satisfactory to me...

I could manually cast the entry at each instance:
```
(entry as IHistory).timeStamp 
```
Alternatively, I could create a new variable with the correct type:
```
const historyEntry: IHistory = entry as IHistory;
```

Are there any other possible solutions that could address this issue effectively?

typescript

Answer 1

Answer №1

If you want to differentiate between historical and non-historical data in a union, you can utilize the isHistory property and define specific characteristics in each interface:

interface IComment extends IData {
    comment: string;
    isHistory: false;
}
interface IHistory extends IData {
    differences: any[];
    timeStamp: number;
    isHistory: true;
}
interface IData {
    user: string;
    date:  string;
    isHistory: boolean;
}

let data: Array<IComment | IHistory>=[]
data.map((entry: IHistory | IComment) => {
  if(entry.isHistory === true) {
    entry.timeStamp //access historical data

  } else {
    entry.comment //access non-historical data

  }
})

Answer 2

If you want to differentiate between historical and non-historical data in a union, you can utilize the isHistory property and define specific characteristics in each interface:

interface IComment extends IData {
    comment: string;
    isHistory: false;
}
interface IHistory extends IData {
    differences: any[];
    timeStamp: number;
    isHistory: true;
}
interface IData {
    user: string;
    date:  string;
    isHistory: boolean;
}

let data: Array<IComment | IHistory>=[]
data.map((entry: IHistory | IComment) => {
  if(entry.isHistory === true) {
    entry.timeStamp //access historical data

  } else {
    entry.comment //access non-historical data

  }
})

Answer 3

Answer №2

Utilize the keyword "in" in this scenario.

if('timeStamp' in entry) {
    entry.timeStamp 
} else {
    entry.comment
  }

Further information can be found in the documentation: https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types

Answer 4

Utilize the keyword "in" in this scenario.

if('timeStamp' in entry) {
    entry.timeStamp 
} else {
    entry.comment
  }

Further information can be found in the documentation: https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types

Answer 5

Answer №3

To tackle this problem, one approach could be to implement a User-Defined Type Guard function. This function assists the compiler in determining whether a parameter matches a specific type. The code snippet below addresses your particular concern - I have included comments to highlight the modifications made.

interface IComment extends IData {
    comment: string;
}

interface IHistory extends IData {
    differences: any[];
    timeStamp: number;
}

interface IData {
    user: string;
    date: Moment | string;
    isHistory: boolean;
}

const data: Array<IHistory | IComment> = [];

data.map((entry: IHistory | IComment) => {
    // Narrowing down the type to IHistory explicitly within the block
    if (isHistory(entry)) {
        // entry.timeStamp
    } else {
        // entry.comment
    }
});

// Implementation of User-Defined Type Guard
function isHistory(data: IData): data is IHistory {
    return data.isHistory;
}

For more information on Advanced Types and User-Defined Type Guards, refer to this resource.

Answer 6

To tackle this problem, one approach could be to implement a User-Defined Type Guard function. This function assists the compiler in determining whether a parameter matches a specific type. The code snippet below addresses your particular concern - I have included comments to highlight the modifications made.

interface IComment extends IData {
    comment: string;
}

interface IHistory extends IData {
    differences: any[];
    timeStamp: number;
}

interface IData {
    user: string;
    date: Moment | string;
    isHistory: boolean;
}

const data: Array<IHistory | IComment> = [];

data.map((entry: IHistory | IComment) => {
    // Narrowing down the type to IHistory explicitly within the block
    if (isHistory(entry)) {
        // entry.timeStamp
    } else {
        // entry.comment
    }
});

// Implementation of User-Defined Type Guard
function isHistory(data: IData): data is IHistory {
    return data.isHistory;
}

For more information on Advanced Types and User-Defined Type Guards, refer to this resource.

Choose between Typescript type a and Typescript type b

Answer №1

Answer №2

Answer №3

Similar questions

The custom marker created with Leaflet using divIcon does not seem to be styled with the specified

What is the best way to incorporate a .json configuration into the environment.ts file and access an API with Angular

Error: Unable to locate module: Could not find 'react-server-dom-webpack/client.edge'

Tips for utilizing generated *.d.ts files

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Angular Error: Unable to access property 'users' on a null value

The Intersection Observer API is caught in a never-ending cycle of rendering

Tips for maintaining the menu state following a refresh

Typescript Error:TS2345: The argument '{ theme: string; jsonFile: string; output: string; }; }' is not compatible with the parameter type 'Options'

Is it possible to modify a single value in a React useState holding an object while assigning a new value to the others?

Creating an array with different types of objects involves specifying the types within the square brackets when

Conditionally show a button in an Angular application based on the truthiness of a boolean value

Exploring the capabilities of argon2-browser in a cutting-edge setup with vite

Discover the steps to dynamically set global data in Vue during runtime

Actions should be pure objects. Employ specialized middleware for handling asynchronous actions in Redux

Oops! The 'map' property cannot be found in the type 'Observable<User>'

Best Practices for Retrieving and Passing Data within a Resolver | Angular 10/11

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

openapi-generator is generating subpar api documentation for TypeScript

Unable to translate text on the loading page