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

Question

У меня есть набор компонентов виджета пользовательского интерфейса в одном модуле приложения Angular 5. Отдельный модуль приложения использует эти виджеты и должен предоставить объект конфигурации для каждого из них. При создании объекта конфигурации в моем редакторе (VS Code) я бы хотел, чтобы редактор проверил объект конфигурации, а также предоставил intellisense.

В идеале, я хотел бы определить интерфейс для каждого виджета в его файле component.ts - таким образом легко обновить и компонент, и интерфейс одновременно. В качестве альтернативы я мог бы иметь один файл интерфейсов.

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

Вариант A: пространства имен
Основываясь на этой статье Я смотрю на пространства имен. Мне нравится идея добавить в одно Config пространство имен из нескольких файлов. Однако я видел несколько мнений, таких как этот ответ на SO , которые говорят, что пространства имен плохие.

Поскольку я считаю, что пространства имен - это вещь TS, а не Angular, я попробовал это:

config.namespace.ts (В настоящее время один файл - как только он заработает, я постараюсь распределить его по нескольким файлам.)

export namespace Config {
    export interface Breadcrumbs {
      responsive: boolean;
      links: BreadcrumbLink[];
    }
    interface BreadcrumbLink {
      label: string;
      link?: string;
    }
}

приложение-config.service.ts

/// <reference path="/path/to/config.namespace.ts" />

@Injectable()
export class AppConfigService {
  config: any = {};
  constructor() { }

  configureWidgets() {
    const breadcrumbWidget: Config.Breadcrumbs = {
      'responsive': true,
      'links': [
        { 'label': 'Home', 'link': 'http://...' },
        { 'label': 'Main Section', 'link': 'http://...' },
        { 'label': 'Current Page' },
      ]
    };
    this.config.breadcrumbs = breadcrumbWidget;

К сожалению, он не тянет пространство имен Config для использования в редакторе.

Вариант B: файл .d.ts
Я новичок в этой концепции, но похоже, что она определяет типы, которые затем использует package.json и делает его общедоступным. Это может сработать, но это означает, что я не смог сохранить интерфейсы в файле каждого виджета, там, где они наиболее полезны. Кроме того, в большинстве статей о файлах .d.ts предполагается, что вы настраиваете наборы для пакета, чего здесь нет.

Опция C: импорт каждого интерфейса напрямую

import { Breadcrumbs } from './path/to/config.namespace.ts'

Это работает, но это не так. Это приведет к длинному набору интерфейсов и определенным путям, если я оставлю каждый интерфейс с его файлом widget.component.ts. Кроме того, я считаю, что импорт в основном предназначен для добавления других функций, которые вы собираетесь использовать в приложении, а не только для удобства в IDE?

Answer 1

В итоге я выбрал версию Option C, но использовал файл ствола для упрощения импорта.В файле component.ts каждого виджета есть интерфейс, который можно использовать при его настройке.Затем файл барреля реэкспортирует все из них:

export { Breadcrumbs } from './path/to/component';
export { Button } from './path/to/component';
export { DialogButton } from './path/to/component';

Затем в сервисе, который устанавливает конфигурацию для каждого виджета, я импортирую все из файла барреля с помощью:

import * as Config from '../../path/to/barrel/widget-interfaces.index';

Наконец, когда я создаю объект конфигурации для нового виджета, я объявляю необходимый интерфейс:

    const app_breadcrumbs: Config.Breadcrumbs = {
      responsive: true,
      links: [
        { label: 'Home', link: '//www.homeurl.com/index.html' },
        { label: 'Main Section', link: '//www.homeurl.com/main-section/main.html' },
        { label: 'Current Page' }
      ]
    };

Я использую код VS, и он предлагает ключи, когда я начинаю печатать, и проверяет, что типыи формы объектов правильные.