An interface is a blueprint for an Object. It tells you which properties there are, which are required and optional and which type of data they hold.
TypeScript has become more popular than ever. For me, it was not love at first sight, but now we are connected. I don’t start a project without TypeScript! So if you experience the same feelings, you’re not alone.
Most of the models in TypeScript are a combination of interfaces and classes. An
interface is a blueprint of a class or object. In this
IPizza interface, we define all the properties a pizza has. In each property, we define what kind of data type the information is.
Every property that is defined in an
interface is required. If you want to make it optional, you must use the
propertyName?: string if we define this property in an interface, it's optional. TypeScript won't give you an error if the property is missing in an
Object. On the other hand, if a property is required, it will give an error if it is missing.
When a property is not defined in an
interface you will get an error from the TypeScript compiler because the data is not according to the blueprint.
We can all come up with properties for a pizza.
- Slices (the number of slices)
Let’s put them in the interface and decide what kind of data type they are.
The example above shows an
interface for our pizza. We gave all the properties a single data type. Now we can create our Pizza object and use the interface to ensure it has the correct properties.
pizza is according to the interface. The
interface is now a form of property validation. If we would add properties that are not in the
interface or properties with wrong data types, the TypeScript will give errors.
With this object, you will get errors! 👇 (Check it on CodeSandbox for yourself)
But what if we want an array of strings or numbers to give our toppings or sizes? We can do that pretty quickly; write
number in the
pizza object is valid.
If we want to type an Array with multiple pizza objects, we can do that the same way with
Sometimes, you will say that a property can be a
string or a
null. In those cases, we use the pipe | to show that it is both.
For example, with the
cheescrust it is optional but can be a boolean or null.
So with the Pizza Tuna, we say we don’t want to offer cheese crust, so we give it a value of
After reading this post, I hope you learned something new or are inspired to create something new! 🤗
If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM’s are always open 😁.
Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay