TypeScript Interfaces Using Interfaces to Enforce Types
Example
One of the core benefits of Typescript is that it enforces data types of values that you are passing around your code to help prevent mistakes.
Let's say you're making a pet dating application.
You have this simple function that checks if two pets are compatible with each other...
checkCompatible(petOne, petTwo) {
if (petOne.species === petTwo.species &&
Math.abs(petOne.age - petTwo.age) <= 5) {
return true;
}
}
This is completely functional code, but it would be far too easy for someone, especially other people working on this application who didn't write this function, to be unaware that they are supposed to pass it objects with 'species' and 'age' properties. They may mistakenly try checkCompatible(petOne.species, petTwo.species) and then be left to figure out the errors thrown when the function tries to access petOne.species.species or petOne.species.age!
One way we can prevent this from happening is to specify the properties we want on the pet parameters:
checkCompatible(petOne: {species: string, age: number}, petTwo: {species: string, age: number}) {
//...
}
In this case, Typescript will make sure everything passed to the function has 'species' and 'age' properties (it is okay if they have additional properties), but this is a bit of an unwieldy solution, even with only two properties specified. With interfaces, there is a better way!
First we define our interface:
interface Pet {
species: string;
age: number;
//We can add more properties if we choose.
}
Now all we have to do is specify the type of our parameters as our new interface, like so...
checkCompatible(petOne: Pet, petTwo: Pet) {
//...
}
... and Typescript will make sure that the parameters passed to our function contain the properties specified in the Pet interface!
