add object to array in typescript

Question

I am just confused. I am trying to add new objects into an array in typescript but I got an error. my interface has a function on it. does anyone have an idea?

interface Videos{
    title: string;
    description: string;
    like: number;
    pressLike():void;
    pressDislike():void;
}
    
class Video implements Videos{
    public title: string;
    public description: string;
    public like: number;

    constructor(title: string, description: string, like?: number){
        this.title = title;
        this.description = description;
        this.like = like || 0;
    }

    public pressLike():void{
        let ins_like = this.like;
        if(ins_like < 0){
            this.like = 0;
        }else{
            this.like++;
        }
    }

    public pressDislike():void{
        let ins_like = this.like;
        if(ins_like < 0){
            this.like = 0;
        }else{
            this.like--;
        }
    }
}

var videoArr: Videos[] = [
    {"title": "Book 1 Water", "description": "Learn the water bending", "like": 0}
];
    
    // this is where I got the error when I try to add new videos in the array

error says missing the pressLike and pressDisplike properties, but they are functions. I have no idea how to add them in the array?

Answer 1

You can add some static methods for parsing JSON, or creating a new instance from an object:

interface Video {
  title: string;
  description: string;
  likeCount: number;
}

class YouTubeVideo implements Video {
  public title: string;
  public description: string;
  public likeCount: number;

  constructor(title: string, description: string, likeCount?: number) {
    this.title = title;
    this.description = description;
    this.likeCount = likeCount ?? 0;
  }

  public pressLike(): void { /** ... */ }

  public pressDislike(): void { /** ... */ }

  static parse(data: string): YouTubeVideo {
    const parsed: Record<string, object> = JSON.parse(data);
    const title: string = parsed.title as unknown as string;
    const description: string = parsed.description as unknown as string;
    const likeCount: number = parsed.likeCount as unknown as number;
    return new YouTubeVideo(title, description, likeCount);
  }

  static fromObject(data: Video): YouTubeVideo {
    return new YouTubeVideo(data.title, data.description, data.likeCount);
  }
}

const videoArr: Video[] = [
  // Constructor
  new YouTubeVideo("Book 1: Water", "Learn water bending"),

  // From an object
  YouTubeVideo.fromObject({
    title: "Book 2: Earth",
    description: "Learn earth bending",
    likeCount: 0,
  }),

  // Parsed from JSON data
  YouTubeVideo.parse(`{
    "title": "Book 3: Fire",
    "description": "Learn fire bending",
    "likeCount": 0
  }`),
];

console.log(videoArr);