item
to the todo-item
component. We'll make sure that the item is of the right type. But its type is not a simple string, number or boolean. We'll define the item's type using an interface.We've already seen an interface provided by Angular: theOnInit
interface which includes the methodngOnInit
. Every Class that implements this interface should define this method. Otherwise we'll get an error during compile time.Interfaces exist only in TypeScript and are removed when the code is compiled to JavaScript. In JavaScript we cannot enforce type safety out of the box.
TodoItem
interface in a new interfaces
folder with the Angular CLI:i
is short for... you guessed it - interface. Adding a path in the command to the Angular CLI generates the folders you specified if they do not already exist.src/app/interfaces/todo-item.ts
:title
which must be of type string
completed
which is of type boolean
and is an optional member @Input
to be of the type we've created. This will allow the IDE to suggest us available members when we use item in the component class and template.TodoItem
type.