2

例えば下記のようなシンプルな循環参照があります。

DepartmentSearchDialogComponent.ts

import UserSearchDialogComponent from './user-search-dialog.component';

export class DepartmentSearchDialogComponent {
    // ...
}

UserSearchDialogComponent.ts

import DepartmentSearchDialogComponent from './department-search-dialog.component';

export class UserSearchDialogComponent {
    // ...
}
  • 「組織検索ダイアログ」は「ユーザ検索ダイアログ」を呼び出せる
    (組織を検索するための条件に組織長ユーザが指定可能で、それを指定するためにユーザ検索ダイアログを呼び出せる)
  • 「ユーザ検索ダイアログ」は「組織検索ダイアログ」を呼び出せる
    (ユーザを検索するための条件に所属組織が指定可能で、それを指定するために組織検索ダイアログを呼び出せる)

この時、typescriptは WARNING in Circular dependency detected: を警告します。

typescriptで以下のようなことを実現しようとする場合、どう書けばよいでしょうか?

  • C言語のincludeガード
  • phpのrequire_once

環境

# npm ls -g typescript
-- @angular/[email protected]
  `-- @schematics/[email protected]
    `-- [email protected]

※ typescrptのバージョンが3.2.xであるため、3.8以降で利用できるtypeによる回避はできそうにありません。

1 件の回答 1

0

循環参照を検知してテストで落とす、といったことをするのは最近だとdependency-cruiserが有力でしょうか。

実装自体を改善したいのであれば、循環参照している実装方法はそもそもどこかが間違っている可能性が高いです。
改善のパターンとしては、UserSearchDialogComponentとDepartmentSearchDialogComponentの共通部分を切り出して互いに依存させる方法と考えられます。いわゆる抽象に依存する方法です(SOLIDの原則)。

Dependency Injection、Mixin、Mediatorパターン、EventEmitterなどを利用して実装するなど方法が考えられます。

色々と書き方はあると思いますが、イメージしやすいように一例として次のようなサンプルを示しておきます。

// types.ts
export interface BaseComponent {
  // 自分自身のダイアログを開く
  showDialog: () => void;
  // 別のコンポーネントを登録する(外部の依存を取り込む)
  register: (anotherComponent: BaseComponent) => void;
  // 別のcomponentのダイアログを開く
  showAnotherDialog: () => void;
}
// department-search-dialog.component.ts
import type { BaseComponent } from "./types";

export class DepartmentSearchDialogComponent implements BaseComponent {
    private anotherComponents: BaseComponent[] = [];
    constructor() {}

    public register(anotherComponent: BaseComponent) {
        this.anotherComponents.push(anotherComponent);
    }

    public showAnotherDialog() {
        this.anotherComponents.forEach(anotherComponent => {
            anotherComponent.showDialog();  
        })
    }

    public showDialog() {

    }
}
// user-search-dialog.component
import type { BaseComponent } from "./types";

export class UserSearchDialogComponent implements BaseComponent {
    private anotherComponents: BaseComponent[] = [];
    constructor() {}

    public register(anotherComponent: BaseComponent) {
        this.anotherComponents.push(anotherComponent);
    }

    public showAnotherDialog() {
        this.anotherComponents.forEach(anotherComponent => {
            anotherComponent.showDialog();  
        })
    }

    public showDialog() {
        // 
    }
}
// main.ts
import { UserSearchDialogComponent } from "./user-search-dialog.component";
import { DepartmentSearchDialogComponent } from "./department-search-dialog.component"

function main() {
    const userSearchDialogComponent = new UserSearchDialogComponent();
    const departmentSearchDialogComponent = new DepartmentSearchDialogComponent();

    userSearchDialogComponent.register(departmentSearchDialogComponent);
    departmentSearchDialogComponent.register(userSearchDialogComponent);

    userSearchDialogComponent.showAnotherDialog(); // departmentSearchDialogComponentも開く
    departmentSearchDialogComponent.showAnotherDialog(); // userSearchDialogComponentも開く
}

こういう感じで切り出すと循環参照を発生させずに済みます。どういった実装が適切かはケースバイケースなので、現状こたえられるのはこれくらいです。

4
  • 結論としては、jsはincludeガードのような単純な手法は実現する手段が存在しない、ということでしょうか? Commented 2021年9月30日 15:32
  • 蛇足です。この解決策は自分も投稿する前に最初に考えましたが、わざわざinterfaceやbaseクラスを作らねばならないのは過剰設計かな、と思ったのが出発点です。SOLID的な意味より言語仕様に存在しないので仕方なくinterfeceで妥協しているようにしか見えないな、というのが個人的な意見です。 Commented 2021年9月30日 15:46
  • 言語仕様レベルで矯正する方法は自分の知る限りではちょっと無いですね。過剰設計かどうか現場判断なのでそこは自分の杞憂でした。
    – himenon
    Commented 2021年10月1日 0:54
  • あえて最初の2ファイルの構造を維持するのであれば、Type-Only Imports and Exportを利用して片方のファイルは型定義だけ参照する、といった方法かなと思います。少なくとも実体さえ循環参照してなければかなりマシになるとは思います。
    – himenon
    Commented 2021年10月1日 0:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。