Typescript: Working with Types and Interfaces

Brief intro to typescript types

With types in typescript you can type your functions and object properties and allow typescript to ensure that those types are evaluated and errors reported when the functions or variables that implements them are misused.

Example:

type User = {
  id: string;
  name: string;
  email: string;
};

// this is correct
const george: User = {
  id: "123456",
  name: "George",
  email: "george@example.com",
};

// this will give an error Type '{ id: string; }' is missing the following properties from type 'User': name, email
const evans: User = { id: "67890" };

Exploring interfaces and types

Typescript interfaces allow you to do all that types can do but includes different syntax to do them and has some advantages like merging declarations and we’ll explore some of the features and typescript utility types below.

Simple use cases

• Use of interfaces in place of types

// there's no = sign after the type (User)
interface User {
  id: string;
  name: string;
  email: string;
}

• Safe typing of function parameters and return types

const users = [5, 6, 3, 1, 9];
function getUser(id: number): boolean {
  return users.includes(id);
}

Utitly types

Typescript utility types allows us to type our data with simple types that we normally use. They are available to use anywhere in the code as you don’t have to define them yourself.

• Omit certain values from a type, say you have a User type but also want a UserInformation type but does not include the id of the user:

// we specify that we want a user with no id
type UserInformation = Omit<User, "id">;
//example
const evans: UserInformation = { name: "Evans", email: "evans@example.com" };
// adding the id here gives an error, 'id' does not exist in type 'UserInformation'
const george: UserInformation = { name: "George", email: "george@example.com" };

• Extend another type but only get certain properties you need. This is similar to the Omit utility but instead, you get only the types that need.

// we only want to use the id type from the user
type UserInformation = Partial<User, "id">;
//example
const evans: UserInformation = { id: "1234567" };
// adding the id here gives an error, 'name','email' does not exist in type 'UserInformation'
const george: UserInformation = { name: "George", email: "george@example.com" };

• Require properties in another type that might be optional or has optional properties.

interface User {
  id?: string; // id is optional
  name: string;
  email: string;
}
//example, we omit id but we don't get any error as it's optional
const evans: UserInformation = { name: "Evans", email: "evans@example.com" };

// here we require it as george needs an id
type RequiredUser = Required<User>;
// id is now required
const george: RequiredUser = {
  id: "459596",
  name: "George",
  email: "george@example.com",
};
// if we omit it we get the error, Property 'id' is missing in type '{ name: string; email: string; }' but required in type 'Required<User>'.
const george_evans: RequiredUser = {
  name: "George",
  email: "george@example.com",
};