Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

Question

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

In JavaScript, when an error occurs idiomatic JS code returns undefined. I converted this code to TypeScript and encountered a problem.

function multiply(foo: number | undefined){
   if (typeof foo !== "number"){
      return;
   };
   return 5 * foo;
}

When trying to use the `multiply` function in my new TypeScript code, the compiler is assuming that it can return undefined, even though it cannot do so.

To work around this issue, I created an "unsafe" version of the `multiply` function which will only be called by safe TypeScript code, leaving the regular JavaScript code to use the original safe version.

function unsafeMultiply(num: number){
   return multiply(num);
}

Since `unsafeMultiply` only accepts numbers as input, the type guard in `multiply` should recognize that it will only ever return a number since `unsafeMultiply` can only process numbers. If this concept is too complex for the TypeScript compiler, how can I convince it that I know what I'm doing?

typescript strictnullchecks

Answer 1

Answer №1

Encountering an issue with the compiler in my new TypeScript code when using multiply, as it mistakenly believes that doStuff can possibly return undefined when it actually cannot.

Although, technically, it is possible: multiply(undefined) will indeed return undefined.

If this complexity is too much for the compiler to grasp, how can I persuade it to trust that I know what I am doing?

One way is to perform a type assertion, considering the fact that multiply will only yield undefined if called with a non-number input:

function unsafeMultiply(num: number) {
   return multiply(num) as number;
}

Alternatively, you could implement a type guard within your code at runtime:

function unsafeMultiply(num: number) {
  let result = multiply(num);
  if (typeof result === "undefined") {
    throw new Error("Invalid num argument");
  }
  return result;
}

However, personally, I would modify the multiply function to either fail or return NaN instead of undefined when provided with undefined; thereby eliminating the need for unsafeMultiply.

Answer 2

Encountering an issue with the compiler in my new TypeScript code when using multiply, as it mistakenly believes that doStuff can possibly return undefined when it actually cannot.

Although, technically, it is possible: multiply(undefined) will indeed return undefined.

If this complexity is too much for the compiler to grasp, how can I persuade it to trust that I know what I am doing?

One way is to perform a type assertion, considering the fact that multiply will only yield undefined if called with a non-number input:

function unsafeMultiply(num: number) {
   return multiply(num) as number;
}

Alternatively, you could implement a type guard within your code at runtime:

function unsafeMultiply(num: number) {
  let result = multiply(num);
  if (typeof result === "undefined") {
    throw new Error("Invalid num argument");
  }
  return result;
}

However, personally, I would modify the multiply function to either fail or return NaN instead of undefined when provided with undefined; thereby eliminating the need for unsafeMultiply.

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

Answer №1

Similar questions

A service worker of unknown origin is currently getting registered

Guide on packaging an Angular 2 Typescript application with Gulp and SystemJS

JSONPath encounters an issue when square brackets are embedded within a string

Implementing advanced error handling using custom error messages with enums

Attempting to grasp the concept of implementing FormArray

Angular progress bar with dynamic behavior during asynchronous start and stop

Can we leverage Angular service styles in scss?

Issue with Angular 6 and Chrome: Event listener ($event) occasionally throws the error "unable to access property 'value' of null"

Updating the state on change for an array of objects: A step-by-step guide

Angular: Issue with object instantiation - Unable to assign property

Issue with detecting errors in Angular unit test when using jest throwError method

The module ~/assets/images/flags/undefined.png could not be found in the directory

Looking for a method to call a child component's function through a click event triggered from the parent component?

Is it possible to use a Jasmine spy on a fresh instance?

Retrieving data from notifications without having to interact with them (using Firebase Cloud Messaging and React Native)

Angular 2: Embracing the Power of Hierarchical Selection

What is the best way to bring a file from a different directory that is located on the same level?

typescript ways to exclude enum values

What steps can I take to perform unit testing on a custom element?

Using React Material UI in Typescript to enhance the theme with custom properties