Расширение типа объекта абстрактного класса

Абстрактный класс AbstractPanelComponent имеет объект config, который хранит некоторую информацию о конфигурации. Когда я расширяю абстрактный класс, я хочу иметь возможность расширить тип config, чтобы добавить пользовательские конфигурации, необходимые для реализации.

// Default Config Type
export type DefaultPanelConfig = {
    name: string
}

// Type I want to use for extending (to add additional info)
export type CustomConfig = {
    additionalConfig: string;
}

@Component({template: ''})
export abstract class AbstractPanelComponent {
    config: Partial<DefaultPanelConfig> = {};
}

@Component(...)
export class APanelComponent extends AbstractPanelComponent {
    // TODO: Expand the allowed Config somehow...
    override config: Partial<CustomConfig & DefaultPanelConfig> = {}
}

Использование override config служит своей цели, но не кажется хорошим стилем. Есть ли лучший способ реализовать такую функцию конфигурации, или это уже хороший способ? Например, я думал об использовании дженериков и чего-то вроде <T extends Partial<DefaultPanelConfig>>, но не мог понять, как мне это использовать. Я с нетерпением жду ваших отзывов!

angular typescript generics types abstract-class

03.05.2023 11:48

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать дженерики, чтобы сделать его более элегантным. Хитрость в том, что вы можете напрямую использовать Partial<T & DefaultPanelConfig> как свой DefaultConfiguration. Таким образом, вы можете легко расширить его с помощью универсального типа и установить универсальный тип по умолчанию, чтобы вам не приходилось его расширять.

Ниже вы можете увидеть пример реализации:

// Default Config Type
type DefaultPanelConfig = {
    name: string
}

// Panel Configuration (Generic, so that it can easily be extended)
// Intersect the default panel configuration with the generic to easily extend it
type PanelConfiguration<T = {}> = Partial<T & DefaultPanelConfig>

// Declare AbstractPanelComponent and set the generic to empty object by default.
abstract class AbstractPanelComponent<T = {}> {
    config: PanelConfiguration<T> = {};
}

/* From here on: Two Test Cases */

// Testing "Default" PanelConfiguration
class APanelComponent extends AbstractPanelComponent {
    // No generic type: Use DefaultPanelConfig and nothing more
    override config: PanelConfiguration = {
        name: "Custom Configuraton", // Valid
        /* additionalConfig: "More Configuration", */ // Invalid (as supposed to)
        /* invalid: "invalid" */ // Invalid (as supposed to)
    }
}

// Declare Custom Config for testing
type CustomConfig = {
    additionalConfig: string;
}

// Testing Extending "Default" Panel Configuration with Custom Configuration
class BPanelComponent extends AbstractPanelComponent<CustomConfig> {
    // Expand the Config by simply adding the Generic Type
    override config: PanelConfiguration<CustomConfig> = {
        name: "Custom Configuraton", // Valid
        additionalConfig: "More Configuration", // Valid
        /* invalid: "invalid" */ // Invalid (as supposed to)
    }
}

Спасибо, работает как положено! Если у кого-то еще есть предложения по улучшению, не стесняйтесь, дайте мне знать! :)

— 08.05.2023 12:21

08.05.2023 10:39