Add a new property to Interface

Question

I have an API interface like below. I cannot add any property to it since it is not under my control.But I need to include boolean property like isPhotoSelected: boolean = false; to it. Can you tell me how to do that?

export interface LibraryItem {
    id: string;
    photoURL: string;
    thumbnailURL: string;
    fileName: string;
}

score 1 · Accepted Answer · edited Oct 29 '17 at 03:27

1

Define a class that implements the interface.

export class DtoLibraryItem implements LibraryItem{
    //need to declare all the properties of the interface here
    isPhotoSelected: boolean
}

edited Oct 29 '17 at 03:27

Sampath

63,341
64
307
441

answered Oct 29 '17 at 02:10

Christian

2,676
3
15
25

Yes, I'm working on this kind of solution now. But it doesn't allow me to use the same name for the class (i.e. `LibraryItem`). Hope we cannot avoid that no? – Sampath Oct 29 '17 at 02:13
Yes it'd have to be named differently. – Christian Oct 29 '17 at 02:17

score 0 · Answer 2 · answered Oct 29 '17 at 15:36

Have you tried declaration merging? That seems to be more in line with what you're asking for than your currently accepted answer:

// import from module
import { LibraryItem } from 'librarymodule'; 

// locally augment the module's interface declaration  
declare module './playground' {
  export interface LibraryItem {
    isPhotoSelected: boolean
  }
}

// use it
const libtaryItem: LibraryItem = {
  id: 'id',
  photoURL: 'https://example.com/photo.jpg',
  fileName: 'fileName.ext',
  thumbnailURL: 'https://example.com/thumbnail.jpg',
  isPhotoSelected: true
}

Hope that helps; good luck!

Add a new property to Interface

2 Answers2