Disclaimer: These are my notes from Ben Awad's video on React TypeScript Tutorial...
So what I think I know: an interface defines the shape of an object. It allows you to say what the properties of that object will be. More precisely, an interface allows you to predestine the name of the object keys, and the type of the object values.
An interface reminds me a bit of a class in Ruby, in that it serves much like a blueprint for instantiating new objects. However, the type-constraining of the object values is what gives Typescript its name, so while there seem to be structural similarities, the functionality is quite divergent.
My brain's attempt to put more tangibility into the idea of a Typescript interface and Typescript in general is that it acts like a sieve or filter. If we have a react component receiving props and its props are typed via an interface, the interface acts as a stopgap against the most basic kinds of errors, i.e., that of the props object being different from what the component itself expected.
I think of a waste treatment plant, where wastewater is eventually recycled into drinkable water. If at one stage, we have a very fine sieve that only lets through very small particles but not sand, wood, or other debris, then at that stage the sieve has essentially worked as a interface for translating and filtering out inappropriate object types that do not conform to the type: liquid.
Whether or not the water is drinkable or not is an issue to be solved further down the line by other means, but it makes sense for the sake of keeping things SRP that we would want to make sure solids are not making there way into what we hope to purify into drinkable water later on.
This logic applies not just to Typescript React components but really any piece of data we can type with Typescript. I'm not sure exactly what word to describe this with, but ones that come to mind are structure, architecture, stigmergy. We're building these things into our programming language, by adopting Typescript, we're breeding in consistency through grammatical constraints on the way we express our code.
One basic piece of syntax we can use in Typescript interfaces is a question mark following a key name and preceding the colon before the value. This ? makes keys/properties of the interface/object optional.
If we want more complex types we can nest interfaces within other interfaces. Examples below:
interface Person {
firstName: string;
lastName: string;
}
interface Props {
text: string;
ok?: boolean;
i?: number;
fn?: (bob: string) => string;
person: Person;
}
Further Reading:
Further Questions:
What exactly is an interface? It looks like a JS object, except we have semicolons instead of commas. The absence of an = assignment operator also makes it look less like an object and more like a function. What does an interface do under the hood? How is an interface different from a Typescript type?
Top comments (0)