Interfaces & Types.

Interfaces define how an object is made. In short, it defines the shape of the object.

interface MyInterface {
  name: string;
  age: number;
}

function getUser(props: MyInterface) {
  // user search algorithm here...
  return user
}

Extending an interface

Interface can also be extended to another interface.

interface MyInterface {
  name: string;
  age: number;
}
interface MyInterfaceTwo extends MyInterface {
  city: string;
}

Optionals in an interface

We can also define a property in our interface as an optional property by putting a ? symbol.

interface MyInterface {
  name: string,
  age: number
  phone?: number
}

Functions with interface

Here, the function getUser receives an argument of IProps type and returns an object of IUser type.

interface IProps {
  userId: string;
}

interface IUser {
  _id: string;
  fullName: string;
  username: string;
  avatar: string;
}

function getUser(props: IProps): IUser {
  const user
  // user search algorithm here..
  return user
}

Types

Types are similar to interfaces. The only difference between Types and Interfaces are that Types cannot be extended.

type MyType = {
  property: string,
}

const a: MyType = {
  property: 'Some value',
}

Combining Types

Two types can be combined together by using & symbol like this.

type MyType = {
  property: string,
}

type MyTypeTwo = {
  property1: string,
} & MyType

const a: MyTypeTwo = {
  property: 'Some value',
  property1: 'Some value',
}

Use bleed for expanding image above