I am trying to build a movie catalog using Angular and ionic. The movie class contains id, title, image and plot.

In the first page, the app displays only id title & image. It omits plot.

Movie class

export class Movie{
    id: number;
    title: string;
    img: string;
    plot?: string;
}

In the main typescript file, I am assigning the movie details as follows

export class MainPage implements OnInit{

    movies: Movie[];
    getMovies(){
        this.movies = [{id: 1, title: 'test', img: 'img1'}]
    }
    ngOnInit(){
        this.getMovies();
    }
}

But this returns following error

Error TS1112: A class member cannot be declared optional. It is referring to the 'plot' variable.

How can I achieve what I intended to? Is there any other options?

Thanks in advance for your help!

I am trying to build a movie catalog using Angular and ionic. The movie class contains id, title, image and plot.

In the first page, the app displays only id title & image. It omits plot.

Movie class

export class Movie{
    id: number;
    title: string;
    img: string;
    plot?: string;
}

In the main typescript file, I am assigning the movie details as follows

export class MainPage implements OnInit{

    movies: Movie[];
    getMovies(){
        this.movies = [{id: 1, title: 'test', img: 'img1'}]
    }
    ngOnInit(){
        this.getMovies();
    }
}

But this returns following error

Error TS1112: A class member cannot be declared optional. It is referring to the 'plot' variable.

How can I achieve what I intended to? Is there any other options?

Thanks in advance for your help!

• javascript
• angularjs
• class
• typescript

1 Answer 1

If Movie is just defining a data structure and doesn't contain any implementation code, then just change it to an Interface:

interface Movie{
    id: number;
    title: string;
    img: string;
    plot?: string;
}

Alternatively the class can just define plot without the ? However in this case you will need to set plot to null in your getMoves method:

class Movie{
    id: number;
    title: string;
    img: string;
    plot: string;
}

class MainPage {

    movies: Movie[];
    getMovies(){
        this.movies = [{id: 1, title: 'test', img: 'img1', plot: null}]
    }
    ngOnInit(){
        this.getMovies();
    }
}