本文へ移動
rdlabo.dev
English

signal-use-as-signal

このプラグインは、SignalをSignalとして正しく使うかを検査します。

  • ⭐️ このルールは plugin:@rdlabo/rules/recommended プリセットに含まれます。
  • ✒️ コマンドラインの --fix オプションで、このルールが報告する問題の一部を自動修正できます。

このルールは、Signalが通常のプロパティとして誤って使われることを防ぎます。

ルール詳細

❌ 誤り: Signalを通常のプロパティとして使う

@Component()
export class SigninPage {
  readonly #id = signal<number>(undefined);

  useMethod() {
    if (this.#id) {
      // error
      this.#id() = 1; // error
    }
  }
}

✅ 正しい: Signalを適切に使う

@Component()
export class SigninPage {
  readonly #id = signal<number>(undefined);

  useMethod() {
    if (this.#id()) {
      this.#id.set(1); // error
    }
  }
}

✅ 正しい: Signal参照をpropsとして渡す

Signalを値として読むのではなく、Signal自体を渡す場合は () は不要です。

@Component()
export class SigninPage {
  readonly food = signal<number>(0);

  openPreview() {
    // componentProps / modal launcher などへ参照渡し
    launchModal({ food: this.food });
    const food = this.food;
    return this.food;
  }
}

オプション

オプションなし。

未対応パターン

このルールはネストしたSignalパターンに対応していません。例えば次のとおりです。

@Component({...})
export class TestComponent {
  nestedSignal = signal({
    child: signal<number>(0)
  });

  ngOnInit() {
    if (this.nestedSignal().child) {  // Incorrect: missing function call
      ...
    }
  }
}

ネストしたSignalが関数呼び出しで正しくアクセスされていない場合を、このルールは検出できません。

実装