How come the variable `T` has been assigned two distinct types?

Question

How come the variable `T` has been assigned two distinct types?

Consider the following code snippet:

function test<T extends unknown[]>(source: [...T], b: T) {
  return b;
}
const arg = [1, 'hello', { a: 1 }]

const res = test(arg, [])
const res1 = test([1, 'hello', { a: 1 }], [])

The variable res has type

(string | number | {a: number;})[]

, while res1 has type [number, string, {a: number;}].

It is intriguing why the type inference for T resulted in two different types.

typescript types

Answer 1

Answer №1

TS "widens" the arg to (string | number | { a: number}). This is because arg is mutable, allowing you to change its value between declaration and usage in test. It is inferred as an array that can have elements added to it. TS can only guarantee potential elements, but not its final form.

In contrast, the parameter in res1 is essentially immutable, so TS can assure its type as [number, string, {a: number;}]. To avoid this narrowing, you must make arg readonly or explicitly assign a type.

const arg1 = [1, 'hello', { a: 1 }] as const
const arg2: [1, 'hello', { a: 1 }] = [1, 'hello', { a: 1 }]

Check out examples on TS Playground

Answer 2

TS "widens" the arg to (string | number | { a: number}). This is because arg is mutable, allowing you to change its value between declaration and usage in test. It is inferred as an array that can have elements added to it. TS can only guarantee potential elements, but not its final form.

In contrast, the parameter in res1 is essentially immutable, so TS can assure its type as [number, string, {a: number;}]. To avoid this narrowing, you must make arg readonly or explicitly assign a type.

const arg1 = [1, 'hello', { a: 1 }] as const
const arg2: [1, 'hello', { a: 1 }] = [1, 'hello', { a: 1 }]

Check out examples on TS Playground

Answer 3

Answer №2

Your code utilizes the power of Variadic Tuple Types

This feature automatically infers the argument type as a Tuple.

However, if you assign the argument to a separate variable, it is inferred as an Array unless you explicitly specify it as a Tuple using a as const assertion.

Answer 4

Your code utilizes the power of Variadic Tuple Types

This feature automatically infers the argument type as a Tuple.

However, if you assign the argument to a separate variable, it is inferred as an Array unless you explicitly specify it as a Tuple using a as const assertion.

How come the variable `T` has been assigned two distinct types?

Answer №1

Answer №2

Similar questions

Dealing with challenges in integrating ngx-masonry with Angular 14

How can I seamlessly combine CoffeeScript and TypeScript files within a single Node.js project?

Obtaining images from the backend within a component's TypeScript file in a MEAN stack application is a

How can you limit a type reference to a specific file in TypeScript?

Executing TypeORM commands yields no output

What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

Changing the button class during an event in Angular 4

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

Tips for utilizing regex to locate words and spaces within a text?

Why does the page not work when I enter a certain URL with an ID parameter, and instead displays the error message "Uncaught ReferenceError: System is not defined"?

Angular AutoComplete feature does not accurately filter the list items

Is it feasible to broaden an interface in Typescript without including a specific type?

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

Steps to configure Visual Studio Code to automatically open the original TypeScript file located in the "src" folder when a breakpoint is hit in a Node.js application

Troubleshooting compatibility issues between Sailsjs Services and TypeScript in Vscode

What is the most efficient way to find the sum of duplicates in an array based on two different properties and then return the

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

For Angular 4, simply add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of the component in order to permit any element

Getting the Final Character from a TypeScript String Constant

Is there a way to conditionally redirect to a specific page using NextAuth?