Leverage a single attribute from a Typescript interface within another interface

Question

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?

typescript interface

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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 8

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 9

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'> {

}

Answer 10

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'> {

}

Leverage a single attribute from a Typescript interface within another interface

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

What could be causing the malfunction of my button's event handlers?

Modify the key within an array of objects that share a common key

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

An unusual error occurred stating that the `forEach` property does not exist on the given type

invoking a method within an express route to retrieve and utilize middleware functions

Using an image as a button in Vue.js: A step-by-step guide

Is there a way to prevent the splash screen from appearing every time I navigate using a navbar link in a single page application (SPA)?

Exploring the attributes of optional features

This function has a Cyclomatic Complexity of 11, exceeding the authorized limit of 10

Incorporate a typescript library into your Angular application

Refreshing the page does not trigger Angular callHooks

The recommended filename in Playwright within a Docker environment is incorrectly configured and automatically defaults to "download."

Filtering arrays of objects dynamically using Typescript

Unable to showcase the content inside the input box

What makes TS unsafe when using unary arithmetic operations, while remaining safe in binary operations?

Verify if the array entries match

Validating multiple conditions in Typescript by passing them as function parameters