I have a specific component that requires two inputs. I am using TypeScript and looking for a way to ensure that the second input is only provided if the first input is also provided.
For example:
export class MyTestClass implements Test{
@Input() dog?: string;
@Input() treat?: string; // Should only be able to exist if dog also exists
}
I attempted to create a generic interface for the component, as shown below:
interface Test<Dog extends string | undefined = string> {
dog?: Dog;
treat?: Dog extends string ? string : undefined
}
However, TypeScript does not raise any errors when the template is used incorrectly, like so:
<my-test-class [treat]="'not type-checked'">
</my-test-class>
Is there a method in Angular to enforce this relationship between inputs during compile-time rather than run-time?