[no-misused-signals] restrict incorrect usage of signals - proposal #1891

MillerSvt · 2024-06-20T06:53:06Z

Description of the proposal

This rule forbids providing Signals to logical locations such as if statements in places where the TypeScript compiler allows them but they are not handled properly. It could be about using signals in a nullish check or comparing them using operators like ===, ==, >, <, >=, or <=. These situations can often arise due to a missing call or just a misunderstanding of the way signals are handled.

In some rare cases === or == operators can be valid. So need to add option ignoreNullishCheck to disable higlighting them.

Reference: https://typescript-eslint.io/rules/no-misused-promises/

Incorrect code

const signal = signal(0);
const otherSignal = signal(0);

if (signal) {
  // Do something
}

if (signal === otherSignal) {
  // Do something
}

if (signal > otherSignal) {
  // Do something
}

if (signal < otherSignal) {
  // Do something
}

const val = signal ? 123 : 456;

while (signal) {
  // Do something
}

@if (signal) {
   something  
}

@if (signal === otherSignal) {
   something  
}

@if (signal > otherSignal) {
   something  
}

@if (signal < otherSignal) {
   something  
}

@switch (signal) {
   something
}

{{ signal }}

Correct code

const signal = signal(0);
const otherSignal = signal(0);

if (signal()) {
  // Do something
}

if (signal() === otherSignal()) {
  // Do something
}

if (signal() > otherSignal()) {
  // Do something
}

if (signal() < otherSignal()) {
  // Do something
}

const val = signal() ? 123 : 456;

while (signal()) {
  // Do something
}

@if (signal()) {
   something  
}

@if (signal() === otherSignal()) {
   something  
}

@if (signal() > otherSignal()) {
   something  
}

@if (signal() < otherSignal()) {
   something  
}

@switch (signal()) {
   something
}

{{ signal() }}

The text was updated successfully, but these errors were encountered:

PowerKiKi · 2024-07-11T00:35:34Z

This seems to be a duplicate of #1753 and should probably be merged into a single issue.

marcorohn · 2025-02-25T10:56:39Z

Since signals are functions, this is also valid typescript code, but will never run, as Function.length always returns 0 for signals:

const mySignal = signal(['hello', 'world']);
if (mySignal.length > 0) {
  ...
}

Just happened to me recently when converting a component to use signals, and I'm recently sure that is not that uncommon

JamesHenry · 2025-03-08T20:27:59Z

Thanks folks, it makes sense to me and I'll happily accept a PR for this rule

MillerSvt added package: eslint-plugin Angular-specific TypeScript rules triage This issue needs to be looked at and categorized by a maintainer labels Jun 20, 2024

ekrapfl mentioned this issue Jul 10, 2024

[no-signal-compare?] new rule request to prevent comparing signals via < or > #1753

Closed

JamesHenry added PRs Welcome If a high-quality PR is created for this it will be accepted and removed triage This issue needs to be looked at and categorized by a maintainer labels Mar 8, 2025

angular-eslint locked and limited conversation to collaborators Mar 8, 2025

JamesHenry converted this issue into discussion #2302 Mar 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

[no-misused-signals] restrict incorrect usage of signals - proposal #1891

[no-misused-signals] restrict incorrect usage of signals - proposal #1891

This issue was moved to a discussion.

This issue was moved to a discussion.

[no-misused-signals] restrict incorrect usage of signals - proposal #1891

[no-misused-signals] restrict incorrect usage of signals - proposal #1891

Comments

This issue was moved to a discussion.