Introduction to Interfaces in TypeScript

TypeScript helps us keep a contract with our vales by allowing us to define fine-grained type checking for them. Interfaces is the primary mechanism in TypeScript to accomplish that.

๐ŸŠ Alligator.io recommends

Our recommended TypeScript courses

Letโ€™s say for example that we have the following code where we define two users:

const user1 = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2 = {
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com'
}

Letโ€™s establish a contract so that our user objects respect a specified type definition:

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com'
}

Now if we try to define User objects with missing properties, additional properties or with properties of the wrong type, the TypeScript compiler will complain and tell us exactly whatโ€™s wrong with our user definition.

You can define optional properties in your interfaces with the Elvis operator (?):

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
  avatar?: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com',
  avatar: 'https://something/my-face.jpg'
}

Notice how we didnโ€™t have to specify any avatar value for user1, and TypeScript wonโ€™t complain.

Your interfaces can be defined in their own files, and then imported with the ES6 module syntax:

import { User } from '../interfaces/user';

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

// ...
  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#