What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Question

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Currently working on some Typescript challenges and encountered a scenario involving a union type.

In this example, the function getIstanbulPostalCode is declared to return either a string or a number:

function getIstanbulPostalCode(): string | number {
  return 34116;
}
let postalCode: number = getIstanbulPostalCode();
postalCode;

The outcome is a type error stating that type 'string | number' cannot be assigned to type 'number'.

The variable postalCode calls getIstanbulPostalCode which returns a number instead of the expected types.

Since the function requires a valid string or number, this results in a type error where 'string' cannot be converted to 'number'.

function istanbul(): number { return 34116; }
let istanbul2: string | number = istanbul();
istanbul2;

The output here is 34116.

I am puzzled by the second instance with the istanbul function where it correctly handles a number as output.

However, when we have istanbul2 defined as potentially either a string or number, there are no type errors. This raises a question about the discrepancy between using parameters with a union type within a function versus assigning a variable like istanbul2.

Your insights would be greatly appreciated.

typescript

Answer 1

Answer №1

The variable called postalCode is expected to hold a number, but the function named getIstanbulPostalCode has the ability to return either a number or a string. Due to TypeScript's compile-time nature, when you specify that the function can return both number and string, it takes your word for it. This leads to an error because TypeScript cannot determine which type is actually returned during runtime.

If you were to modify your function as shown below, TypeScript would correctly infer the return type as a number and no error would occur:

function getIstanbulPostalCode() {
  return 34116;
}
let postalCode: number = getIstanbulPostalCode(); // no error
postalCode;

In the second scenario, you are stating that istanbul2 could be a string or a number, and the function istanbul only returns a number. This satisfies the condition of it being either a number or a string, hence why there are no errors thrown in this case.

Answer 2

The variable called postalCode is expected to hold a number, but the function named getIstanbulPostalCode has the ability to return either a number or a string. Due to TypeScript's compile-time nature, when you specify that the function can return both number and string, it takes your word for it. This leads to an error because TypeScript cannot determine which type is actually returned during runtime.

If you were to modify your function as shown below, TypeScript would correctly infer the return type as a number and no error would occur:

function getIstanbulPostalCode() {
  return 34116;
}
let postalCode: number = getIstanbulPostalCode(); // no error
postalCode;

In the second scenario, you are stating that istanbul2 could be a string or a number, and the function istanbul only returns a number. This satisfies the condition of it being either a number or a string, hence why there are no errors thrown in this case.

Answer 3

Answer №2

Have you ever wondered why there are no type errors when we create a variable istanbul2 that can be either a string or a number?

The reason for this is because in TypeScript, a number is considered a subtype of string | number. Essentially, you can interpret the pipe symbol as "or", so the statement "number is (string or number)" is valid, allowing for the assignment without any issues.

However, when using this variable, you are limited to the common methods shared by both types. This means you can only use methods like toLocaleString(), toString(), and

valueOf()</code without encountering an error. You can't even concatenate the variable with itself using the + operator.</p>
<p>Although console.log is quite lenient and accepts values of type <code>any[]

, if you want to perform any meaningful operations with the variable, you'll likely need to validate its type beforehand.

Answer 4

Have you ever wondered why there are no type errors when we create a variable istanbul2 that can be either a string or a number?

The reason for this is because in TypeScript, a number is considered a subtype of string | number. Essentially, you can interpret the pipe symbol as "or", so the statement "number is (string or number)" is valid, allowing for the assignment without any issues.

However, when using this variable, you are limited to the common methods shared by both types. This means you can only use methods like toLocaleString(), toString(), and

valueOf()</code without encountering an error. You can't even concatenate the variable with itself using the + operator.</p>
<p>Although console.log is quite lenient and accepts values of type <code>any[]

, if you want to perform any meaningful operations with the variable, you'll likely need to validate its type beforehand.

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Answer №1

Answer №2

Similar questions

Utilizing a TypeScript definition file (.d.ts) for typings in JavaScript code does not provide alerts for errors regarding primitive types

Navigate back to the initial page in Ionic2 using the navpop function

Vue 3 Single Page Application. When selecting, it emits the language and the contentStore does not update the content exclusively on mobile devices

Is there a method to automatically select or deselect a checkbox based on the incoming value in Angular?

Unable to make changes to the document

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

Guide to creating a one-to-one object literal map with a different value type using a function return without explicitly defining the return type

How to choose a particular Excel spreadsheet in Angular before importing the file?

Adding a custom property to a React component

In the event that you encounter various version formats during your work

Combining switch statements from various classes

Encountered a React TypeScript issue stating that the type '{ ... }' cannot be assigned to the type 'IntrinsicAttributes & IntrinsicClassAttributes<...>'

The issue of declaration merging and complications with nested node_modules

Is it possible to incorporate the arrow function within the debounce function?

Ensuring the proper export of global.d.ts in an npm package

How should dynamic route pages be properly managed in NextJS?

What Type of state does Typescript expect in React?

Saving in prettier differs from running it with npm

Using the index in Vue.js to locate a method within an HTML file

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined