typescript - "TS7030: Not all code paths return a value" vs. ESLint "no-undefined" and "no-useless return" conflict resolving

Question

Target

I understand what ESLint is not the single source of truth, and moreover, could be oppositely customized, but in this question I want one of below result:

• Resolve the conflict obeying to all mentioned rules
• Been said "In this case you can safely disable the ESLint rule ＜rule name＞　rule because ＜argumentation＞"

Conflict description

Below code is valid and working, but I have no-undefined ESLint rule violation:

@Component
export default class MyComponent extends Vue {

  public static getInstanceByReference(
    vueReference: Vue | Element | Array<Vue> | Array<Element>
  ): MyComponent | undefined {
    if (vueReference instanceof MyComponent) {
      return vueReference;
    }
    return undefined;
  }
}

If we delete undefined from return undefined, it will be no-useless-return rule violation:

@Component
export default class MyComponent extends Vue {

  public static getInstanceByReference(
    vueReference: Vue | Element | Array<Vue> | Array<Element>
  ): MyComponent | undefined {
    if (vueReference instanceof MyComponent) {
      return vueReference;
    }
    return;
  }
}

If we completely return useless from the view point of JavaScript last return, it will be the TypeScript error:

TS7030: Not all code paths return a value.

@Component
export default class MyComponent extends Vue {

  public static getInstanceByReference(
    vueReference: Vue | Element | Array<Vue> | Array<Element>
  ): MyComponent | undefined {
    if (vueReference instanceof MyComponent) {
      return vueReference;
    }
  }
}

If we change the return value signature to MyComponent | void, we get the no-invalid-void-type rule violation of @typescript-eslint.

question from:https://stackoverflow.com/questions/65557745/ts7030-not-all-code-paths-return-a-value-vs-eslint-no-undefined-and-no-us

Answer 1

The question I'd ask is "what is the goal of your code?"

If the goal is to signal an error/nothing state - then a "nullish" value is truly what you want. Given that your lint config (for whatever reason) bans the undefined value, then why not just use null?

 public static getInstanceByReference(
    vueReference: Vue | Element | Array<Vue> | Array<Element>
  ): MyComponent | null {
    if (vueReference instanceof MyComponent) {
      return vueReference;
    }
    return null;
  }

---

If you really want the undefined value without explicitly referencing undefined, then as per the no-undefined docs, you can just use the void operator:

 public static getInstanceByReference(
    vueReference: Vue | Element | Array<Vue> | Array<Element>
  ): MyComponent | undefined {
    if (vueReference instanceof MyComponent) {
      return vueReference;
    }
    return void 0;
  }

---

As an aside.

If we change the return value signature to MyComponent | void, we get the no-invalid-void-type rule violation of @typescript-eslint.

void should not be used in a union type. It's pretty a non-sensical type to say "this function returns something or returns absolutely nothing". It contradicts things and causes TS to act somewhat counter-intuitively (i.e. like disabling the missing return statement check).

This is why the no-invalid-void-type rule reports on MyComponent | void, and is no doubt the reason that your lint config has the rule turned on.