TypeScript - Interfaces
Manuel Ojeda

Manuel Ojeda @manuelojeda

About: Web Full Stack Dev. I love JavaScript and defender of TypeScript. Advocadte of Vue, and learner of React. PHP is my backend lord and Laravel his son.

Location:
La Paz, BCS, México
Joined:
Sep 19, 2019

TypeScript - Interfaces

Publish Date: May 14 '20
6 0

TypeScript: Interfaces

As we read before, the typing system from TypeScript is the main feature inside this superset by adding a strong typed system into JavaScript. Now, one of the most used features is called: Interfaces

What is an Interface?

An Interface we can calling as a properties contract with need to be fulfilled in order to satisfy the requirement in the code about that Interface. The sintax is pretty simple, to declare an interface need to be like.

interface <PutYourInterfaceNameHere> {
  yourProperty?: <your type here>;
}
// The ? is optional and you indicate into the contract that property is optional and is not required to fulfill the interface.
Enter fullscreen mode Exit fullscreen mode

Example:

interface Foo { // <- Needs to be PascalCase
  Bar: string;
  MyBar: boolean;
  MyFoo?: number;
}
Enter fullscreen mode Exit fullscreen mode

And how to use it? Just like a type, you need to declare it as a type:

let MyFooExample: Foo
Enter fullscreen mode Exit fullscreen mode

Benefits? If you are using VS Code, Intellisense will be listening and helping you by showing all the properties that the interface has, also you can make a group of types you need in case you are using OOP, this helps you to make your code cleaner:

TypeScript Interface Example

Pretty simple, isn't? Tell me what you think about the interfaces? Tell me in the comment section your thoughts and see you next time.

Comments 0 total

    Add comment