LWC Component parameter in Tab changes from Integer to String on browser refresh

Question

I have a LWC component wrapped in an Aura Component that is then configured as a Lightning Component tab. This tab is opened on a button click from the home page (in a Lightning Console) using the lightning:workspaceAPI. When opening the Component in a tab, an Integer parameter is also passed along by creating a Pagereference type of 'standard__Component'. What i'm seeing is that once the tab is opened, if the user refreshes the browser, the type of the parameter changes from Integer to String. Why is this happening ? What can be done to maintain the parameter as an Integer ?

Sample code (Please run in a Lightning Console):

Component that opens up the Tab-

componentOnPageAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:button label="Open Component in Tab (Aura)" onclick="{!c.openComponentInTab}"/>
</aura:component>   

componentOnPageAuraController.js

({
    openComponentInTab : function(component, event, helper) {
        var workspace = component.find("workspace");
        var param = 12345678;
        var compPageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__componentInTabAuraWrapper'
            },
            state: {
                c__param: param
            }
        };
        workspace.openTab({
            pageReference : compPageReference,
            focus : true
        });
    }
})

componentInTabAuraWrapper.cmp

<aura:component implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes">
    <aura:attribute name="param" type="Integer" />
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <c:componentInTab param="{!v.param}"/>
</aura:component>

componentInTabAuraWrapperController.js

({
    onInit : function(component, event, helper) {
        var myPageRef = component.get("v.pageReference");
        var param = myPageRef.state.c__param;
        component.set("v.param", param);
    }
})

componentInTab.html

<template>
    <lightning-card>
        <p>{param} is of type {paramType}</p>
    </lightning-card>
</template>

componentInTab.js

import { LightningElement, api } from 'lwc';

export default class ComponentInTab extends LightningElement {
    @api param;
    get paramType(){
        return typeof this.param;
    }
}

componentInTab.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Answer 1

That's expected. Parsing values from the URL will always be a string, as the data type isn't encoded in the URL parameter. They are numbers only when they don't end up going through the URL (e.g. when used in NavigationMixin). You should always use parseInt/parseFloat before using a (potentially) user-supplied value from the URL, if you're expecting a number to begin with. These methods are safe to use even if the number is already a number and not a string.