Creating a Typescript interface with at least one specified type

Question

Creating a Typescript interface with at least one specified type

I've recently delved into using typescript. Currently, I'm faced with a scenario where I need to import available types from backend endpoints. In one specific instance, an endpoint can support two types as parameters.

Example:

interface B extends A {
    value?: string,
    values?: string[]
}

Here, A represents the type imported from the backend, and it may have either value: string or values: string[].

Currently, I've made both properties optional in the interface B, but I believe this is not the ideal solution. How can I structure interface B so that it only contains either value or values?

Thank you.

typescript

Answer 1

Answer №1

If you're searching for the solution to the "either or" scenario, you'll need a concept known as a union type. These are created using the pipe | operator and signify "either this type OR that type".

Here's an illustration:

type StringOrNumber = string | number;

Alternatively:

type FooOrBar = { foo: string; } | { bar: string; };

For your specific situation:

interface IWithValue {
   value: string;
}

interface IWithValues {
   values: string[];
}

type IValueOrValues = IWithValue | IWithValues;

You can experiment with an example in the typescript playground.

Answer 2

If you're searching for the solution to the "either or" scenario, you'll need a concept known as a union type. These are created using the pipe | operator and signify "either this type OR that type".

Here's an illustration:

type StringOrNumber = string | number;

Alternatively:

type FooOrBar = { foo: string; } | { bar: string; };

For your specific situation:

interface IWithValue {
   value: string;
}

interface IWithValues {
   values: string[];
}

type IValueOrValues = IWithValue | IWithValues;

You can experiment with an example in the typescript playground.

Creating a Typescript interface with at least one specified type

Answer №1

Similar questions

What is the best way to organize checkboxes (either checked or unchecked) within a mat-table?

What is the best way to position Scroll near a mat row in Angular?

In Typescript, the module source is imported rather than the compilation output

Building a frontend and backend using Typescript with a shared folder for seamless integration

When working with Typescript, it is important to correctly identify elements as checkboxes in order to avoid any red underlines when referencing

Perplexed by the implementation of "require(...)" in TypeScript

Trigger the Angular Dragula DropModel Event exclusively from left to right direction

TSLint warning: Duplicate identifier detected - 'err'

How can you specify the active route in Angular?

Angular StrictNullChecks: "Error - object may be null"

Automate the process of triggering the "Organize Imports" command on a VSCode / Typescript project through code

arrange the elements in an array list alphabetically by name using the lodash library

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Establishing a server in Node.js alongside an Angular 2 frontend by harnessing the power of Typescript

Compiler error occurs when trying to pass props through a higher-order component via injection

Modifying Data with MomentJS when Saving to Different Variable

Troubleshooting issues with importing modules in TypeScript when implementing Redux reducers

Guide on retrieving the interface property name or key name as a string in Typescript

When compiling to ES5, TypeScript fails to remove imports

The subscribe method in Angular TS may be marked as deprecated, but worry not as it is still