TypeScript – How to fix Type ‚null‘ is not assignable to type readonly

Issue

NgRx Walkthrough tutorial.

The walkthrough tutorial demonstrates the key concepts of the store to manage the state and how the user can add and remove items from the collection within an Angular component. 

An example of the error

component.html

<app-books
class="book-list"
[books]="books$ | async"
(add)="onAdd($event)">

Error: Type ‚readonly Book[] | null‘ is not assignable to type ‚readonly Book[]‘.
Type ‚null‘ is not assignable to type ‚readonly Book[]‘

component.ts

@Input() books: ReadonlyArray = [];

Solution

@Input() books: ReadonlyArray<Book> | any = [];

• Share on Facebook