Angular Частный внутренний интерфейс (известный как Typescript Nested Class)

Question

Как я могу использовать вложенный интерфейс в директиве Angular?

В Java я считаю, что вложенные классы stati c - отличный способ организовать код. Я хотел бы сделать то же самое в Typescript / Angular, но у меня возникли проблемы с настройкой.

Приведенный ниже код близок к работе. Но у меня возникают проблемы с тем, экспортирую ли я пространство имен или нет

Если я это сделаю, то я не могу объявить директиву в модуле, который его содержит. Я получаю следующее предупреждение:

MyDirective не объявлен ни в одном модуле Angular.

Если это не так, у меня возникают проблемы при наборе объектов как MyDirective.DirectiveOptions из-за следующей ошибки:

TS2702: «MyDirective» относится только к типу, но используется здесь как пространство имен.

Моя директива

@Directive({
    selector: '[appMyDirective]'
})
export class MyDirective implements OnInit {
    defaultDirectiveOptions: MyDirective.DirectiveOptions = {
        callback: () => {console.log('default callback called')}
    };

    @Input('appMyDirective')
    directiveOptions: MyDirective.DirectiveOptions = {};

    ngOnInit(): void {
        this.directiveOptions = {...this.defaultDirectiveOptions, ...this.directiveOptions};
    }
}

// Seems like a dumb way to nest an interface, but whatever.
export namespace MyDirective {
    export interface DirectiveOptions {
        callback?: () => void;
    }
}

В другом месте в файле foo.component.ts:

options: MyDirective.DirectiveOptions = {
    callback: ()=>{
        console.log('Overridden callback called');
    }
}

Answer 1

Итак, вы создаете пространство имен и класс с одним именем. Пожалуйста, примите во внимание, что Angular компилируется в JavaScript. И JS не имеет классов и пространств имен. Все вещи будут компилироваться в функции. Вот почему вы получаете такое сообщение.

Answer 2

Исходя из того, что я могу сказать, оригинальный код в вопросе работает так же хорошо, как и все, что я могу найти. Если у вас есть лучшее решение, пожалуйста, опубликуйте его.

Answer 3

Как насчет объявления интерфейса, состоящего из свойства другого интерфейса, подобного этому?

export interface MyDirective {
    directiveOptions: DirectiveOptions
}

export interface DirectiveOptions {
    callback?: () => void;
}