angular - Typescript interface - field with type: MyInterface | string, not working when trying to access property

Question

I'm trying to recreate my mongoose object on my Angular app, so I'm trying to make interfaces. The problem is that I'm not always sending my object with populated fields so I have something like this:

export interface Action {
  _id: string
  document: Document | string,
}
export interface Document {
  _id: string
  ...otherFields
}

And In my code I have something like:

const data = {
  documentId: action.document?._id
}

But I'm getting this error that block compilation:

Property '_id' does not exist on type 'string'.

So, how to make it work with both types?

question from:https://stackoverflow.com/questions/65887677/typescript-interface-field-with-type-myinterface-string-not-working-when-t

Answer 1

When using type unions, you have to cast the complex types to use their properties:

const data = {
  documentId: (action.document as Document)?._id
}

If you want to store a string for document in your interface for Action, I would make an additional optional property to save you from having to cast document.:

export interface Action {
  document?: Document,
  docString?: string
}

Be aware that document is a reserved word in javascript. I'd use doc or something else.