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

Using Angular 4 to monitor changes in two-way binding properties

What could be causing my TypeScript project to only fail in VScode?

When trying to access a certain class property, I was met with the following error message: TypeError: Unable to read/set property 'x' of

Angular - Automatically update array list once a new object is added

Should the null-forgiving operator be avoided when using `useRef`?

What is the best way to incorporate ControlContainer in an Angular component's unit test?

I'm struggling to find the right Typescript syntax for defining a thunk function that returns a value while using React Redux Toolkit

Examining Axios HttpService piping through a NestJS middleware in a unit test

Angular threw an error saying: "Template parse errors: is not a recognized element"

Issue with rendering HTML tags when replacing strings within Ionic 2 and Angular 2

When utilizing a generic type with a class, type T fails to meet the specified constraint

Allow for an optional second parameter in Typescript type definition

Creating a canvas that adjusts proportionally to different screen sizes

Execute supplementary build scripts during the angular build process

react-i18next: issues with translating strings

What allows the execution of "T[keyof T] extends Function" in TypeScript specifically for Strings?

Angular API snapshot error: The type 'IJobs' does not match the expected type 'IJobs[]'

I am encountering an issue where my application is not recognizing the angular material/dialog module. What steps can I take to resolve this issue and ensure that it functions properly?

Guide: Implementing material-ui theme with redux in gatsby

Troubleshooting TypeScript errors in Cassini with Google Chrome