Leverage a single attribute from a Typescript interface within another interface

Let's imagine we have a TypeScript Interface like this

export interface IMyObj {
    id: string;
    type: 'AA' | 'AZ' | 'XY';
    ...
}

Now, I require another interface that includes the same type field

export interface IMyOtherObj {
    ...
    type: 'AA' | 'AZ' | 'XY';
    ...
}

As you can see, there is duplication in the values of type. So my question is, how can I reuse the IMyObj.type within my IMyOtherObj interface? I attempted the following

export interface IMyOtherObj {
    ...
    type: IMyObj.type; // -> error
    ...
}

I believe I'm on the right track but haven't been successful so far, any ideas?

typescriptinterface

Answer №1

The problem you're encountering is due to the fact that TypeScript's type system does not support property access using '.' but rather indexed property types. To resolve this, make a simple adjustment in your type definition:

type: IMyObj['type']

Answer №2

Develop a custom enum to represent the property category, for instance

enum CategoryEnum {
    X = "X",
    Y = "Y",
    Z = "Z"
}

and integrate it as shown below;

export interface ICategoryObject {
    id: string;
    category: CategoryEnum;
}

Answer №3

To enhance code modularity, one approach is to create a specialized interface solely for defining the type property and then inherit from it in other interfaces:

export interface ITypedObject {
    type: 'AA' | 'AZ' | 'XY';
}

export interface ICustomObject extends ITypedObject {
    id: string;
}

Explore more about Extending Interfaces in the TypeScript Handbook

Answer №4

To enhance your code, consider utilizing the extends feature.

For instance:

export interface IMyObj {
    id: string;
    type: 'AA' | 'AZ' | 'XY';
    ...
}

Followed by:

export interface IMyOtherObj extends IMyObj{
    ...
    otherthings: string;
    ...
}

Answer №5

There are two possible approaches for this situation.

The first option is to extract the type of the field as its own type and use it in both places.

type ObjectType = 'AA' | 'AZ' | 'XY'
interface A {
  type: ObjectType;
}
interface B {
  type: ObjectType
}

Alternatively, if you are unable to modify the first interface, you can make the second interface extend a subtype of the first one.

interface A {
  type: 'AA' | 'AZ' | 'XY';
}

interface B extends Pick<A, 'type'> {

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a class method in an event using Angular with Typescript

I am completely new to TypeScript and Angular, and I am attempting to create a basic drawing component on a canvas. However, I have reached a point where I feel lost and confused about my code. The concept of "this" in TypeScript has been a major stumbling ...

angulartypescript

What impact does introducing a constraint to a generic type have on the inference process?

Let's take a look at this scenario: function identity<T>(arr: T[]) { return arr } identity(["a", "b"]) In the above code snippet, the generic type T is inferred as string, which seems logical. However, when we introduce a ...

typescripttypescript-generics

Understanding the Relationship Between Interfaces and Classes in Typescript

I’ve come across an interesting issue while working on a TypeScript project (version 2.9.2) involving unexpected polymorphic behavior. In languages like Java and C#, both classes and interfaces contribute to defining polymorphic behaviors. For example, i ...

javascripttypescriptoopinterfacepolymorphism

Manage numerous receiving bank accounts, allowing customers to transfer money to each specific account

Managing multiple receiving bank accounts and enabling customers to transfer money to specific accounts is a key requirement in my application. Can Plaid help me achieve this functionality? Could you provide guidance on how to implement this feature using ...

node.jstypescriptnext.jsplaid

What is the best way to retrieve a function's response depending on the parameters provided?

I am trying to figure out how to determine the data types of copied array elements in my code. let inputArray = [ { test: 1, }, { test: 2, }, ]; function clone(array: any[]): any[] { return Array.from(inputArray); } ...

typescript

Is there a way to incorporate several select choices using specific HTML?

I am currently trying to dynamically populate a select tag with multiple option tags based on custom HTML content. While I understand how to insert dynamic content with ng-content, my challenge lies in separating the dynamic content and wrapping it in mat ...

angulartypescriptangular-material

Error: Unrecognized action type in Vuex

I've been encountering some major issues with vuex lately. For some reason, getters, actions, and mutations are not being recognized. In the code snippet below, although fetchFacilities is working fine, addFacility is throwing an error: [vuex] unknown ...

typescriptvue.jsvuex

Tips for capturing an error generated by a child component's setter?

I've created an App component that contains a value passed to a Child component using the @Input decorator. app.component.html <app-child [myVariable]="myVariable"></app-child> app.component.ts @Component(...) export class AppC ...

javascriptangulartypescript

Can a type be established that references a type parameter from a different line?

Exploring the Promise type with an illustration: interface Promise<T> { then<TResult1 = T, TResult2 = never>( onfulfilled?: | ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ...

typescript

Evaluation of button display based on certain conditions

I currently have two different render functions that display certain elements based on specific conditions. The first render function looks like this: private render(): JSX.Element { return ( <div> {this.props.x && this.state.y ...

reactjstypescriptreact-nativejestjsenzyme

Utilizing the MapToIterable Angular Pipe with TypeScript

Exploring the implementation of a pipe in Angular. Discovered that ngFor doesn't work with maps, prompting further research to find a solution. It seems that future features may address this issue, but for now, utilizing a mapToIterable pipe is the re ...

angulartypescripttypescript2.0angular-pipe

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

Build a unique array of identifiers extracted from an object

I am seeking advice on how to extract an array of IDs values by iterating through an object in React JS. const initialState = useMemo(()=> { return dataTable.filter(result => favorites.some(favorite => result.id === favorite.id)) },[ ...

javascriptreactjstypescriptantd

What is the best way to obtain an error as an object when subscribing to an HTTP GET request

I am working on an asp.net core webApi along with an Angular9 WebApp. My goal is to retrieve the error in a subscribe as an object rather than just a string. this.http.post<TestSystem>(this.url, testsystem).subscribe((result) => { // do someth ...

angulartypescript

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Currently, I am using react in conjunction with typescript. Within my project, there are two components - one serving as the child and the other as the parent. I am passing a ref to my child component, and within that same child component, I am binding my ...

javascriptreactjstypescript

Incorporate MUX Player (Video) into Angular versions 14 or 15

Mux offers a video API service with its own player: MUX Player I am interested in integrating this npm package specifically into a component in Angular 14/15. The JavaScript should only be loaded when this particular component is rendered. Integration Th ...

javascriptangulartypescriptgorilla

Using Angular to parse intricate JSON data

Need help parsing an http request in the following format: [ { "id": 1, "date": "2022-01-13T00:00:00.000+00:00", "time": "2022-01-13T21:21:21.000+00:00", "office&quo ...

arraysjsonangulartypescript

What kind of Input field is being provided as an argument to a TypeScript function?

Currently, I am working through an Angular 2 tutorial where an input element is being passed to a function through a click event. The tutorial includes an addTodo function with the following signature: addTodo(event, todoText){ }. However, there is a warn ...

angulartypescript

Transmitting image data (blob) from the frontend to the backend using Next.js and tRPC (T3 stack)

I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...

typescriptnext.jszodtrpct3

Can we verify if strings can serve as valid property names for interfaces?

Let's consider an interface presented below: interface User { id: string; name: string; age: number; } We also have a method defined as follows: function getUserValues(properties:string[]):void { Ajax.fetch("user", properties).then( ...

typescript