Используйте одно свойство интерфейса Typescript в другом интерфейсе

Question

Предположим, у меня есть интерфейс Typescript следующим образом

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

Теперь мне нужен другой интерфейс, который также имеет это поле type

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

Как вы видите, я продублировал значения type. Итак, мой вопрос, как я могу использовать IMyObj.type в моем IMyOtherObj интерфейсе? Я попробовал это

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

Я думаю, что я близок, но пока нет удачи, есть предложения?

Answer 1

Ваша проблема в том, что система типов TS не имеет . доступа к свойству, но проиндексировал тип свойства , измените одну вещь в определении типа:

type: IMyObj['type']

Answer 2

Определите перечисление для вашей собственности type, например

enum MyEnum {
    Aa = "AA",
    Az = "AZ",
    Xy = "XY"
}

, и используйте его так:

export interface IMyObj {
    id: string;
    type: MyEnum;
}

Answer 3

У вас есть 2 варианта.

1, извлеките тип типа поля как его собственный тип и используйте его в обоих местах.

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

}
interface B {
  type: ObjectType
}

Или, если вы не можете изменить первый Интерфейс, вы можете заставить второй интерфейс расширять подтип первого.

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

}

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

}

Answer 4

Вы можете создать новый интерфейс, который содержит только определение свойства типа, а затем расширить его по сравнению с другими:

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

export interface IMyObj extends ITypedObj {
    id: string;
}

Руководство TS: Расширение интерфейсов

Answer 5

вы можете использовать функциональные возможности расширений

, поэтому у вас будет

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

, а затем

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