Exploring the curious case of how TypeScript doesn't throw an error when combining a string with undefined

Question

Exploring the curious case of how TypeScript doesn't throw an error when combining a string with undefined

Consider the following code snippet:

function func1(param1: number, param2?: number) {
  console.log(param1 + param2); // This line will throw an error 'param2' is possibly 'undefined'.(18048)
}
func1(5);

Now, let's take a look at this code snippet:

function func2(param1: string, param2?: string) {
  console.log(param1 + param2); // This line of code is actually valid
}
func2('Hello');

Have you ever wondered why TypeScript doesn't flag an error in the second scenario when running in strict mode?

typescript

Answer 1

Answer №1

The definitive solution to this inquiry can be located in a specific comment on microsoft/TypeScript#2093 by the head developer of the TypeScript team at Microsoft:

There is a vast amount of code out there that performs operations like this:
console.log("Foo is " + x);
where x could be a function, undefined, or null, in which case explicitly using toString() would not be appropriate. We made the judgment that adding anything to a string is so frequently done that it should never result in an error.

[This proposal] does not warrant making a potentially disruptive change to the language.

So that is the resolution: whether one agrees with it or not, the TypeScript team opted not to disrupt existing practical code that appends miscellaneous content to strings.

In that particular issue and other similar instances (such as microsoft/TypeScript#7989, microsoft/TypeScript#42983, and microsoft/TypeScript#48962), it is noted that individuals eager for this feature and willing to utilize ESLint could activate the

@typescript-eslint/restrict-plus-operands

regulation which will raise alerts when employing + to merge values of differing types. Hence, there exist alternatives, even if they are not directly integrated into TypeScript.

Answer 2

The definitive solution to this inquiry can be located in a specific comment on microsoft/TypeScript#2093 by the head developer of the TypeScript team at Microsoft:

There is a vast amount of code out there that performs operations like this:
console.log("Foo is " + x);
where x could be a function, undefined, or null, in which case explicitly using toString() would not be appropriate. We made the judgment that adding anything to a string is so frequently done that it should never result in an error.

[This proposal] does not warrant making a potentially disruptive change to the language.

So that is the resolution: whether one agrees with it or not, the TypeScript team opted not to disrupt existing practical code that appends miscellaneous content to strings.

In that particular issue and other similar instances (such as microsoft/TypeScript#7989, microsoft/TypeScript#42983, and microsoft/TypeScript#48962), it is noted that individuals eager for this feature and willing to utilize ESLint could activate the

@typescript-eslint/restrict-plus-operands

regulation which will raise alerts when employing + to merge values of differing types. Hence, there exist alternatives, even if they are not directly integrated into TypeScript.

Answer 3

Answer №2

My perspective differs

I believe adding a string to undefined is permissible as it is a recognized JS operation

However, I am surprised that a number cannot be concatenated with undefined since it is also a valid JS operation

Answer 4

My perspective differs

I believe adding a string to undefined is permissible as it is a recognized JS operation

However, I am surprised that a number cannot be concatenated with undefined since it is also a valid JS operation

Answer 5

Answer №3

When it comes to concatenation, JavaScript will always convert the second value into a string if the first value is a string. This is why there's no issue with b potentially being undefined - you can concatenate any type with a string.

However, if you attempt to specify that a should be of type number, or perform any other operations, an error will occur:

function fn2(a: number, b?: string) {
  console.log(a + b);  // 'b' is possibly 'undefined'
}
fn2(5);

Answer 6

When it comes to concatenation, JavaScript will always convert the second value into a string if the first value is a string. This is why there's no issue with b potentially being undefined - you can concatenate any type with a string.

However, if you attempt to specify that a should be of type number, or perform any other operations, an error will occur:

function fn2(a: number, b?: string) {
  console.log(a + b);  // 'b' is possibly 'undefined'
}
fn2(5);

Exploring the curious case of how TypeScript doesn't throw an error when combining a string with undefined

Answer №1

Answer №2

Answer №3

Similar questions

What is the proper way to incorporate ts-nameof in the gulp build process and encounter the error message: 'getCustomTransformers' is a compiler option that is not recognized

Vite is turning a blind eye to compiler errors until the specific file is executed during runtime

Typescript type definitions for an npm package that can be easily installed

What is the best method for implementing intersection types within an angular template?

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

How can a parent's method be activated only after receiving an event emitter from the child and ensuring that the parent's ngIf condition is met?

What is the best way to use a generic to reference the value of an object in Typescript?

What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

The attribute 'checked' is not a valid property for the 'TElement' type

Creating a custom Angular library with a specialized chart.js provider that includes extra plugins?

Communication between related components in Angular involving siblings

What is the meaning of '=>' in typescript/javascript?

angular component that takes a parameter with a function

Exploring nested arrays of subdocuments in a query

Guide to adding a loading spinner into your Angular project

I need to figure out a way to switch between selected tabs by utilizing the [Previous] and [Next] buttons through a type

Utilizing ADF components and services within an Angular application: best practices explained

Passing properties from a parent component to a child component in a React TypeScript application

How can one effectively transform a value into a boolean in Typescript?

Using Typescript, you can specify an array of type <T> within an object