The presence of "error TS7030: Not all code paths return a value" is resulting from the "strict" setting being set to false in the tsconfig.json file

Question

The presence of "error TS7030: Not all code paths return a value" is resulting from the "strict" setting being set to false in the tsconfig.json file

Let's start by replicating the issue I am facing.

Begin by creating a new Angular project

ng new ng-ts-strict-issue
cd ng-ts-strict-issue

Update compilerOptions in tsconfig.json. Change the value of strict to false.

{
  ...
  "compilerOptions": {
    ...
    "strict": false,
    ...
  },
  ...
}

Include a new method in the app.component.ts.

test(p: string): string | null | undefined {
  if (p === 'test') {
    return;
  }
  return null;
}

Execute ng build

⠼ Building...✘ [ERROR] TS7030: Not all code paths return a value. [plugin angular-compiler]

    src/app/app.component.ts:17:6:
      17 │       return;
        ╵       ~~~~~~

Application bundle generation failed. [3.905 seconds]

https://i.sstatic.net/eTSfd.png

I am familiar with this error. It is associated with the "noImplicitReturns": true setting in the tsconfig.json file. Disabling this option can resolve the problem.

However, my query is why does the return; statement trigger the

TS7030: Not all code paths return a value.

error only when the strict mode is set to false? All code paths have already been accounted for. Why is there a violation of the noImplicitReturns rule?

angular typescript

Answer 1

Answer №1

When not having the --strictNullChecks compiler option enabled, your code is seen as:

function test(p: string): string {
  if (p === 'test') {
    return; // error
  }
  return null;
}

This means that string | null | undefined behaves like just string because null and undefined are automatically included in every type by default. As mentioned in microsoft/TypeScript#7358, the bare return statement can be considered a potential mistake since it doesn't explicitly return a value of string, null, or undefined. This change was requested in microsoft/TypeScript#5916.

The error message might be misleading, as it may seem to indicate "not all code paths return", but it's actually referring to "not all code paths explicitly returning a value".

To address this issue (assuming you wish to maintain your current compiler options), the solution would be to explicitly return undefined instead:

function test(p: string): string {
  if (p === 'test') {
    return undefined; // okay
  }
  return null;
}

Link to the playground with the code

Answer 2

When not having the --strictNullChecks compiler option enabled, your code is seen as:

function test(p: string): string {
  if (p === 'test') {
    return; // error
  }
  return null;
}

This means that string | null | undefined behaves like just string because null and undefined are automatically included in every type by default. As mentioned in microsoft/TypeScript#7358, the bare return statement can be considered a potential mistake since it doesn't explicitly return a value of string, null, or undefined. This change was requested in microsoft/TypeScript#5916.

The error message might be misleading, as it may seem to indicate "not all code paths return", but it's actually referring to "not all code paths explicitly returning a value".

To address this issue (assuming you wish to maintain your current compiler options), the solution would be to explicitly return undefined instead:

function test(p: string): string {
  if (p === 'test') {
    return undefined; // okay
  }
  return null;
}

Link to the playground with the code

The presence of "error TS7030: Not all code paths return a value" is resulting from the "strict" setting being set to false in the tsconfig.json file

Answer №1

Similar questions

What is the process for connecting a control in a template to an event listener?

Using Firestore queries in your NodeJS application

The agm-snazzy-info-window appears at various locations unpredictably

The ngx-toaster message is showing a delay of about 30-40 seconds before displaying on the browser in Angular 11

The NgModel variable, which is exported through Angular7 template driven validation, appears to be returning an

Creating a cohesive "notification" feature in React with TypeScript that is integrated with one specific component

checking if the regex pattern matches every input

Combining multiple forms in Angular 8页面

Is it possible to retrieve standard time using Angular?

Exploring elements within <ng-content> using ContentChild

Using Angular to Make a Request for a Twitter API Access Token

Having difficulty generating the appropriate output for ng-new app

Add the arrivalDate value to the existing array

Exploring TypeScript: TS2349 - The function you are trying to call is not callable. The type 'never' does not have any call signatures

Are you looking for a streamlined method to create styled components with MaterialUI?

The absence of essential DOM types in a TypeScript project is causing issues

Ways to Include Material UI in Child Elements within Angular Development

Issue with the MUI Autocomplete display in my form

Combining the power of Angular CLI with Squarespace

I am unable to show a variable on the screen