# How To Use A TypeScript Interface?

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, your 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 `?` . For example, `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.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

### Example

We can all come up with properties for a pizza.

- Name
- Slices (the number of slices)
- Toppings
- Price
- Cheesecrust
- Vegan
- Vegetarian

Let’s put them in the interface and decide what kind of data type they are.

```ts
interface IPizza {
    name: string;
    slices: number;
    toppings: string;
    price: number;
    cheescrust: boolean;
    vegan?: boolean;
    vegetarian?: boolean;
}
```

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.

```ts
const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: 'Tomato sauce, BBQ sauce',
    price: 15,
    cheescrust: true
}
```

Now the `pizza` is according to the interface. The `interface` is now a form of data validation. If we would add properties that are not in the `interface` or properties with wrong data types, the TypeScript will give errors.

```ts
const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    meat: true
}
```

With this object, you will get errors! 👇 (Check it on[CodeSandbox for yourself](https://medium.com/r/?url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ftypescript-error-with-wrong-property-information-kdi529%3Ffile%3D%2Findex.ts))


![1_2lVYUioEXcbN31E8FZg6ww.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660639818212/oFGZE2AQ-.png align="left")



![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

### Multiple values

But what if we want an array of strings or numbers to give our toppings or sizes? We can do that pretty quickly; write `string[]` or `number[]` in the `interface`.

```ts
interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}
```

Now our `pizza` object is valid.

```ts
const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}
```

If we want to type an Array with multiple pizza objects, we can do that the same way with `IPizza[]`.

```ts
const pizzaArray: IPizza[] = []
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

### Conditional values

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.

```ts
// IPizza properties with an array of values.
interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean | null;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}
```

For example, with the `cheescrust` it is optional but can be a boolean or null.

```ts
const pizza: IPizza {
    name: 'Pizza Tuna',
    slices: 8,
    toppings: ['Tomatosauce'],
    price: 11.99,
    cheescrust: null,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}
```

So with the Pizza Tuna, we say we don’t want to offer cheese crust, so we give it a value of `null`.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Thanks!
![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)
*After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.*

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

*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](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁*