What causes an array of type `never[] & number[]` to be generated when using `Object.assign`?

Take a look at this code snippet:

const arr = [1,2,3]
const res1 = arr.slice()
const res2 = Object.assign([],arr)

When using arr.slice() to create a shallow clone, the resulting array res1 will have a type of number[], just like the original arr. However, if you use Object.assign() instead, the array res2 will have a type of never[] & number[].

But why does the type of res2 include never[]? How can it be both number[] and never[] at the same time (using the & operator)?

Answer №1

Consider the nature of Object.assign:

Object.assign<T, U>(target: T, source: U): T & U

In other words, the type returned is the intersection of the objects passed as target and source. When type declarations are not explicitly stated, TypeScript infers the types of the arguments being passed. In the case of `arr`, it correctly infers as `number[]`, but for the first argument/target, since it is an empty array with no elements to infer from, it is inferred as `never[]`, resulting in a return type of `never[] & number[]`.

To achieve the desired result, you can explicitly specify the type of target, like this:

const res2 = Object.assign([] as number[], arr)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refine the search results by focusing on a specific property value

Assume I have a type defined as follows: type Result = {error:true,response: undefined} | {error:undefined, response:{nick:string}} This type will either contain an error property or a response, but not both. Now, I am attempting to create a function tha ...

Exploring the Behavior of Typescript Modules

When working with the module foo, calling bar.factoryMethod('Blue') will result in an instance of WidgetBlue. module foo { export class bar { factoryMethod(classname: string): WidgetBase { return new foo["Widget" + classname](); ...

Is there a way to dynamically define the return type of a function in Typescript?

Can the variable baz be dynamically assigned the string type? type sampleType = () => ReturnType<sampleType>; // Want to return the type of any function I pass (Eg. ReturnType<typeof foo>) interface ISampleInterface { baz: sampleType; } ...

Ways to trigger a function in Angular every 10 seconds

What is the method to utilize Observable function for fetching data from server every 10 seconds? Custom App service fetchDevices (): Observable<Device[]> { return this.http.get(this.deviceUrl) .map(this.extractData) .catch(this ...

Troubleshooting React child problems in TypeScript

I am facing a coding issue and have provided all the necessary code for reference. Despite trying numerous solutions, I am still unable to resolve it. export class JobBuilderOptimise extends React.Component<JobBuilderOptimiseProps & JobBuilderOptim ...

What is the method for reaching a service in a different feature module?

Currently, I am utilizing Angular 2/4 and have organized my code into feature modules. For instance, I have a Building Module and a Client Module. https://i.stack.imgur.com/LvmkU.png The same structure applies to my Client Feature Module as well. Now, i ...

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

//html <span style="margin-left:43%;background-color:rgb(229,229,229);border- radius:10%">&nbsp;&nbsp;{{formatEpoch(epoch)}}&nbsp;&nbsp;</span> //ts lastdate:any; formatEpoch(epoch): string { ...

What is the ideal configuration for Typescript within ASP.NET 4 MVC 5 on Visual Studio 2015?

Currently, I am in the process of integrating a TypeScript project into a VS2015 MVC 5 project (which is based on ASP.NET 4, specifically not asp.net 5 or asp.net 6 - only the MVC portion is version 5). All aspects of my query pertain solely to this target ...

Having issues with Fullcalendar's custom view called "vertical resource view" functioning improperly

I am currently using fullcalendar 4 with angular and I am trying to implement a custom view based on this example: https://fullcalendar.io/docs/v4/vertical-resource-custom-demo The view I require spans across 5 days (Monday to Friday) for just one resou ...

What is the best way to merge two different types in TypeScript?

JavaScript is struggling to merge two objects with identical properties. During development, there's a need to combine two configurations. if (mode === 'development') { return merge(productionConfig, Configuration); } The interfaces ...

What steps can be taken to eliminate the 404 error when refreshing an Angular 8 Single Page Application (SPA) without using

In my single page application project, I am utilizing Angular 8. Upon uploading my published code to the IIS server without using hash(#) in routing, I encounter a 404 error when attempting to refresh the page. Can anyone provide assistance on how to res ...

How can I ensure that a particular component type passes the typescript check in a react-typescript project?

I'm fairly new to using TypeScript, although I have a lot of experience with React (and prop-types). Recently, I've run into an issue when it comes to typing my components, specifically when another component is passed as a prop. I already have ...

A guide on converting array values to objects in AngularJS HTML

Here is my collection of objects: MyCart = { cartID: "cart101", listProducts : [ {pid:101, pname:"apple", price: 200, qty:3}, {pid:102, pname:"banana", price: 100, qty:12} ] } I have incorporated a form in ...

Is there a way to compile Node's global modules and objects using TypeScript while having the checkJs option enabled?

By including "checkJs": true in my tsconfig.json file, Node's global paths and objects are marked as "not found". For example, if I were to write: import path from "path"; const p = path.resolve(__dirname, 'dist/js') The TypeScript co ...

Is the return type determined by the parameter type?

I need to create an interface that can handle different types of parameters from a third-party library, which will determine the return type. The return types could also be complex types or basic types like void or null. Here is a simple example demonstra ...

`Mapping child routes in Angular using basic components`

I am encountering an issue with Angular 8 routes. The problem lies in the child routes not functioning properly. Here are my defined routes: const routes: Routes = [ { path: 'admin', component: MainComponent, children: [ { path: &apo ...

Using TypeScript with .env file variables: a step-by-step guide

I stored my secret jwt token in the .env file. JWT_SECRET="secretsecret" When I attempt to retrieve the value using process.env.JWT_SECRET, I encounter an error: Argument of type 'string | undefined' is not assignable to parameter of t ...

Ways to display "No records" message when the filter in the material table in Angular returns no results

How can I implement a "No Records Message" for when the current table is displaying empty data? Check out this link for examples of material tables in AngularJS: https://material.angular.io/components/table/examples ...

Tips for addressing the ESLint issue stating that the package should be included in dependencies instead of devDependencies

Struggling to properly lint my React+Typescript project with ESLint. In one of my components, I'm utilizing the useParams hook from react-router. import { useParams } from 'react-router'; However, ESLint is throwing an error on that line: E ...

Executing asynchronous methods in a Playwright implementation: A guide on constructor assignment

My current implementation uses a Page Object Model to handle browser specification. However, I encountered an issue where assigning a new context from the browser and then assigning it to the page does not work as expected due to the asynchronous nature of ...