How to resolve "property doesn't exists in type object" error in angular?

Issue

In my application there is a parent component that contains a list of objects that represents different fruits. When a user selects a fruit, its data are passed to the child component which displays all the data as details.

        <app-details 
            [fruit]="selectedFruit"
        ></app-details>

Inside the details template:

<div class="fruit-details">
    <h1>{{fruit.name}}</h1>
    <h1>{{fruit.color}}</h1>
    <h1>{{fruit.description}}</h1>
</div>

'fruit' property is set to type object in details component. @Input()fruit: Object;

An error occurs stating something like Property 'description' does not exist on type 'Object'. Not setting "fruit" property to datatype of "Object" solves the issues. But How can I solve this issue without removing the data type.

Solution

Declare an interface for Fruit and then use that as your type:

interface Fruit { 
    name: string;
    color: string;
    description: string;
}

@Input()fruit: Fruit;

Answered By - Zze