Surprising type transformation in TypeScript caught me off guard

Looking to fetch paginated data from a server using TypeScript.

Encountering a strange conversion issue with one of the variables.

Created a test program to reproduce the behavior, but it works as expected unlike the main application.

Check out the test program below:

#!/usr/bin/env node

var q = {page: '1', results: '1'};
var si = '1';

interface aqm {
    [key: string]: string | number;
}

function uasekq(si: string, q: aqm = {}, foo: string) {
    console.log(si);
    console.log(q);
    console.log(foo);
}

uasekq(si, q, "abc");

Here is how the large application transpiles to JavaScript:

function uasekq(si) {
    var q = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
    var temp = (0,_cuaq__WEBPACK_IMPORTED_MODULE_0__["default"])((0,_shsosm__WEBPACK_IMPORTED_MODULE_1__["default"])({
        queryKey: [
            "s",
            si,
            "aek"
        ],
        pathname: "/v3/keys/storage/:si",
        q: (0,_shsospm__WEBPACK_IMPORTED_MODULE_2__["default"])((0,_shsosm__WEBPACK_IMPORTED_MODULE_1__["default"])({}, q), {
            si: si
        })
    }, options));
    return temp;
}

The variable q being passed in both the small test program and large application is:

{page: '1', results: '25'}

In the large application, however, q seems to be received differently:

Arguments(2) [undefined, {…}, callee: (...), Symbol(Symbol.iterator): ƒ]
0: undefined
1: {page: '1', results: '25'}
callee: (...)
length: 2
Symbol(Symbol.iterator): ƒ values()
get callee: ƒ ()
set callee: ƒ ()
[[Prototype]]: Object

Here's an excerpt of the original TypeScript function and its call:

// Called with:
// const { d: ek, il } = uasekq(si, q);
// ...from another file.

interface aqm {
    [k: string]: string | number;
}

function uasekq(
    si: string,
    q: aqm = {},
    o: p<uaqo<pr<ek>>> = {}
) {
    var temp = uaq<pr<ek>>({
        qk: ['s', si, 'aek'],
        p: '/v/k/s/:si',
        q: { ...q, si },
        ...o,
    });
    return temp;
}

What could be causing this behavior? It almost looks like an attempt to convert key-value pairs into a numerical array.

We are utilizing [email protected]. Perhaps upgrading to version 5.3.3 might solve the issue? Tried upgrading to TypeScript 5.3.3 but encountered compilation errors. Experimented with [email protected]; successful compilation but bug still persists.

Answer №1

Upon closer inspection, I discovered that the function was indeed functioning properly; the issue lies elsewhere. It hadn't occurred to me how sourcemaps could significantly impact variable values displayed in the console. Disabling the sourcemap revealed the correct value in the console.

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

Tips for refreshing a DOM element after inserting with jQuery

I'm trying to update the LI element after using the insertBefore function in jQuery. The issue arises after adding new elements to UL where I encounter difficulty deleting the same element (using emailTagRemove). Check out the demo to see the proble ...

ngClass binding fails to update when using directives to communicate

I am looking to combine two directives in a nested structure. The 'inner directive' includes an ng-class attribute that is bound to a function taking parameters from both inner and outer scopes, and returning a Boolean value. This is the HTML co ...

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

Retrieve the values and IDs for every span element within the form

I have been attempting to retrieve all span elements within a form and make them editable input text fields. Once you click away, they should revert back to span elements. I will provide a live example in the attached fiddle. I tried my hand at it, but the ...

The close button for facebox is positioned in the top right corner

Hello, I am currently using the facebox plugin to display an iframe link. I am looking to customize the style of the close button by positioning it at the top. Can anyone provide assistance on the CSS aspect of this request? Additionally, I am interested i ...

Is it possible to create a Morris.js Bar Graph using PHP?

I've been trying to showcase my MySQL data using Morris.js graphs, but unfortunately, the graphs are not showing up at all. I carefully followed a basic tutorial, yet nothing seems to be working. Can someone please point out what may be going wrong wi ...

Retrieving output from a Typescript React Component

Is there a way to retrieve the result from the component class using this method? When I call the ExampleSelectionComponent, it displays the desired output but I also need to access the value of exampleSelectionId in this class. public render() { const ...

Why won't my code execute in the script using Python's selenium function driver.execute_script()?

In my python script with the selenium library, I am encountering an issue with the driver.execute_script() function. It seems that only certain parts of the script are being executed while others are not. The following code works properly: driver.execute ...

Having difficulty with a button in a Navbar using Python and Selenium

As a newcomer to Selenium, I am currently attempting to automate the login process for a specific site but have hit a roadblock with clicking on the drop-down button in the navigation bar. Below is my current code: from selenium import webdriver from sel ...

Mapping the correct syntax to apply font styles from an object map to the map() function

React, JS, and Material UI Hey there, I have a question about my syntax within the style property of my map function. Am I missing something? Fonts.jsx export const fonts = [ { fontName: 'Abril', key: 'abril', fontFamily ...

Calculating values within the TR using jQuery: A step-by-step guide

I have a situation where I am looking to use jQuery to calculate values within a table row. Below is a screenshot of the page where I need to determine the number of working days for an employee and display the count as NWD (Number of Working Days). http ...

Specify the minimum required spacing between two meshes in THREE.JS

I'm working on a code that generates clouds with random positions, rotations, and scales. However, sometimes these clouds can end up clipping together when they are generated close to each other or near another object. I want to set a minimum distance ...

Unfortunately, an exception was encountered: ES Module must be loaded using the import statement

Currently, I am addressing some vulnerability concerns within my Angular development environment. These vulnerabilities are found within internal dependencies, so I have included resolutions in the package.json file. However, when I attempt to run 'ng ...

Unable to "serialize" geoJSON information

While working with Leaflet JavaScript, I am attempting to retrieve data directly from GeoServer using an Ajax link. To display it nicely in a DataTables table, I need to convert it into JSON format as per DataTables instructions. However, I keep encounteri ...

Explanation of Sorting Numbers in JavaScript Code

I'm currently reviewing the descending number sorting code below and I'm feeling a bit confused: var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b - a}); In the given code, the return value will be (b-a), for example, 10 ...

Incorporating a React component into a vanilla JavaScript document

Currently, I am working on implementing a weather widget using an npm module called . This particular module is based on React components, which is a new territory for me. I have managed to include the CDNs provided by the npm module, but I am struggling ...

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Upon completing the Angular 2 Tour of heroes tutorial, I found myself pondering how to "retrieve the heroes" using a REST API. If my API is hosted at http://localhost:7000/heroes and returns a JSON list of "mock-heroes", what steps must I take to ensure a ...

Having trouble importing a component conditionally within a nested component

I am attempting to dynamically import and render one of two components based on the value returned by a prop (lang). If props.lang is set to spanish, then it should import and render a component named <Spain />; otherwise, <UnitedStates />: /* ...

Link property can be added to a bindpopup polygon in Leaflet to have it open in a new tab when clicked

Is it possible to include a hyperlink in popup content on Leaflet, similar to this example? function onEachFeature(feature, layer) { idLoDat = feature.properties.IDLo; layer.bindPopup("Company name: " + feature.properties.TenCty + " ...

Converting JSON data into an interactive and editable table using Angular

Seeking guidance on implementing an editable table in Angular using the provided JSON data. The JSON includes a list of table objects, each with potentially different structures. { "tables": [{ "tableName": "tableName1", "columnNames": [ ...