Creating a TypeScript type or interface that represents an object with one of many keys or simply a string

Question

Creating a TypeScript type or interface that represents an object with one of many keys or simply a string

I am tasked with creating an interface that can either be a string or an object with one of three specific keys.

The function I have takes care of different errors and returns the appropriate message:

export const determineError = (error: ServerAlerts): AlertError => {
  if (typeof error !== "string") {
    if (error.hasOwnProperty("non_field_errors")) {
      return error.non_field_errors[0];
    } else if (error.hasOwnProperty("detail")) {
      return error.detail;
    } else if (error.hasOwnProperty("email")) {
      return error.email[0];
    } else {
      return UNKNOWN_ERROR;
    }
  } else {
    return error;
  }
};

These are the defined types:

export type AlertError =
  | "Unable to log in with provided credentials."
  | "E-mail is not verified."
  | "Password reset e-mail has been sent."
  | "Verification e-mail sent."
  | "A user is already registered with this e-mail address."
  | "Facebook Log In is cancelled."
  | string;

export interface ServerAlerts {
  non_field_errors: [string];
  detail: string;
  email: [string];
}

However, my current design for ServerAlerts doesn't fully meet my needs. It should also accommodate cases where ServerAlerts could be just a plain string, and when it has one key, it only contains one value.

How would you suggest redesigning the type or interface to handle these scenarios?

EDIT: I attempted to make the keys optional by adding question marks, but then my linter raises concerns in the error return statements of determineError.

typescript types typescript-typings

Answer 1

Answer №1

If my comprehension is correct, you simply need to declare the parameter as either ServerAlerts or string:

export const validateError = (error: ServerAlerts|string): AlertError => {
// -----------------------------------------------^^^^^^^

You mentioned in a comment that all three properties of ServerAlerts are optional, so make sure to mark them as such using ?:

interface ServerAlerts {
  non_field_errors?: [string];
  detail?: string;
  email?: [string];
}

This means that any object typed as object will also be valid, since all fields are optional. Combined with the above change, here's what you'll get:

validateError("foo");                       // Works
validateError({ non_field_errors: ["x"] }); // Works
validateError({ detail: "x" });             // Works
validateError({ email: ["x"] });            // Works
validateError({});                          // Works (due to all fields being optional)
let nonLiteralErrors: object;
nonLiteralErrors = { foo: ["x"] };
validateError(nonLiteralErrors);      // Works (due to all fields being optional)
validateError({ foo: ["x"] });              // Fails (correctly)

Playground example

Suggestions have been made to use object in the parameter signature. If one of the three fields should be required (removing the need for the UNKNOWN_ERROR branch), you can define three interfaces and create a union type with them inside ServerAlerts:

interface ServerAlertsNonFieldErrors {
  non_field_errors: [string];
}

interface ServerAlertsDetail {
  detail: string;
}

interface ServerAlertsEmail {
  email: [string];
}

type ServerAlerts = ServerAlertsNonFieldErrors | ServerAlertsDetail | ServerAlertsEmail;

You would then use type assertions when returning the specific field:

if (error.hasOwnProperty("non_field_errors")) {
  return (error as ServerAlertsNonFieldErrors).non_field_errors[0];
// ------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

With this approach, you'd have:

validateError("foo");                       // Works
validateError({ non_field_errors: ["x"] }); // Works
validateError({ detail: "x" });             // Works
validateError({ email: ["x"] });            // Works
validateError({});                          // Fails (correctly)
let nonLiteralErrors: object;
nonLiteralErrors = { foo: ["x"] };
validateError(nonLiteralErrors);      // Fails (correctly)
validateError({ foo: ["x"] });              // Fails (correctly)

Playground Example

Answer 2

If my comprehension is correct, you simply need to declare the parameter as either ServerAlerts or string:

export const validateError = (error: ServerAlerts|string): AlertError => {
// -----------------------------------------------^^^^^^^

You mentioned in a comment that all three properties of ServerAlerts are optional, so make sure to mark them as such using ?:

interface ServerAlerts {
  non_field_errors?: [string];
  detail?: string;
  email?: [string];
}

This means that any object typed as object will also be valid, since all fields are optional. Combined with the above change, here's what you'll get:

validateError("foo");                       // Works
validateError({ non_field_errors: ["x"] }); // Works
validateError({ detail: "x" });             // Works
validateError({ email: ["x"] });            // Works
validateError({});                          // Works (due to all fields being optional)
let nonLiteralErrors: object;
nonLiteralErrors = { foo: ["x"] };
validateError(nonLiteralErrors);      // Works (due to all fields being optional)
validateError({ foo: ["x"] });              // Fails (correctly)

Playground example

Suggestions have been made to use object in the parameter signature. If one of the three fields should be required (removing the need for the UNKNOWN_ERROR branch), you can define three interfaces and create a union type with them inside ServerAlerts:

interface ServerAlertsNonFieldErrors {
  non_field_errors: [string];
}

interface ServerAlertsDetail {
  detail: string;
}

interface ServerAlertsEmail {
  email: [string];
}

type ServerAlerts = ServerAlertsNonFieldErrors | ServerAlertsDetail | ServerAlertsEmail;

You would then use type assertions when returning the specific field:

if (error.hasOwnProperty("non_field_errors")) {
  return (error as ServerAlertsNonFieldErrors).non_field_errors[0];
// ------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

With this approach, you'd have:

validateError("foo");                       // Works
validateError({ non_field_errors: ["x"] }); // Works
validateError({ detail: "x" });             // Works
validateError({ email: ["x"] });            // Works
validateError({});                          // Fails (correctly)
let nonLiteralErrors: object;
nonLiteralErrors = { foo: ["x"] };
validateError(nonLiteralErrors);      // Fails (correctly)
validateError({ foo: ["x"] });              // Fails (correctly)

Playground Example

Creating a TypeScript type or interface that represents an object with one of many keys or simply a string

Answer №1

Similar questions

Custom component not rendering expected CSS style

Accessing element from view within controller in Ionic version 3.5

The challenge of handling Set type in TypeScript errors

Utilize the useState() hook to add an object and display its data in a React Native

The error message "TypeError: this.subQuery is not a function" is displayed

Typescript interface created specifically for React Higher Order Component Props

The attribute is not found on the combined type

Is it possible to enhance an interface by integrating the characteristics of a constant?

Designing a personalized mat-icon using the Github SVG

Exploring the World of Geometry with Three.js and TypeScript

Trouble encountered when using RxJS zip and pipe together

Ways to use DecimalPipe for rounding numbers in Angular - Up or down, your choice!

Solving the problem of cookieParser implementation in NestJS

Issue with TypeScript: Declaring type for objects in an array using .map

Incorporate an external library

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

React - retrieving the previous page's path after clicking the browser's "back" button

Properly incorporating a git+https dependency

Enhance your Angular application with lazy loading and nested children components using named outlets

What is the best way to implement asynchronous guarding for users?