Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Question

Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Currently, I am in the process of migrating some older websites to TypeScript. However, I keep encountering a type error during the build process. The specific error message is

Type error: Argument of type 'number' is not assignable to parameter of type 'string'.

.

The problematic block of code looks like this:

useEffect(() => {
        let iframWrap = document.querySelectorAll<HTMLElement>('.video-wrapper iframe');
        iframWrap.forEach( (thing, key) => {
            const thingWidth : number = parseFloat( thing.getAttribute('width') );
            const thingHeight: number = parseFloat( thing.getAttribute('height') );
            let thingRatio : number = 1;
            if( typeof thingWidth === 'number' && typeof thingHeight === 'number'){
                thingRatio = parseFloat(thingWidth/thingHeight); 
            }else{
                thingRatio = 1;
            }
            thing.style.aspectRatio = thingRatio;
        })
    },
    []);

The issue arises when the division operation

thingRatio = parseFloat(thingWidth/thingHeight);

is performed.

I have made sure to assign number types to all variables within the function, so it's confusing why the error mentioning a string type is occurring.

typescript next.js

Answer 1

Answer №1

Make sure to handle the situation where thing.getAttribute('width') may return null.

Also, you do not need to use parseFloat for thingRatio since both thingWidth and thingHeight are already converted to numbers.

Below is the updated code snippet:

  useEffect(() => {
    const iframeWrap = document.querySelectorAll<HTMLElement>('.video-wrapper iframe');

    iframeWrap.forEach((thing) => {
      const width = thing.getAttribute('width') || '0'; // Handle potential null values
      const height = thing.getAttribute('height') || '0'; // Provide a default value

      const thingWidth = parseFloat(width);
      const thingHeight = parseFloat(height);

      let thingRatio = 1;
      if (Number.isFinite(thingWidth) && Number.isFinite(thingHeight)) {
        thingRatio = thingWidth / thingHeight;
      }

      try {
        thing.style.aspectRatio = String(thingRatio); // Ensure aspectRatio is a string
      } catch (error) {
        console.warn('Error setting aspect ratio:', error); // Handle potential errors
      }
    });
  }, []);

Answer 2

Make sure to handle the situation where thing.getAttribute('width') may return null.

Also, you do not need to use parseFloat for thingRatio since both thingWidth and thingHeight are already converted to numbers.

Below is the updated code snippet:

  useEffect(() => {
    const iframeWrap = document.querySelectorAll<HTMLElement>('.video-wrapper iframe');

    iframeWrap.forEach((thing) => {
      const width = thing.getAttribute('width') || '0'; // Handle potential null values
      const height = thing.getAttribute('height') || '0'; // Provide a default value

      const thingWidth = parseFloat(width);
      const thingHeight = parseFloat(height);

      let thingRatio = 1;
      if (Number.isFinite(thingWidth) && Number.isFinite(thingHeight)) {
        thingRatio = thingWidth / thingHeight;
      }

      try {
        thing.style.aspectRatio = String(thingRatio); // Ensure aspectRatio is a string
      } catch (error) {
        console.warn('Error setting aspect ratio:', error); // Handle potential errors
      }
    });
  }, []);

Answer 3

Answer №2

style.aspectRatio is a string type, but you are trying to assign a number to it. Make sure to convert the number to a string before assigning.

thing.style.aspectRatio = thingRatio.toString();

Answer 4

style.aspectRatio is a string type, but you are trying to assign a number to it. Make sure to convert the number to a string before assigning.

thing.style.aspectRatio = thingRatio.toString();

Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Answer №1

Answer №2

Similar questions

Even when using module.exports, NodeJS and MongoDB are still experiencing issues with variable definitions slipping away

Invalid sequencing of Nest.js async onModuleInit causing issues

"Exploring the features of next-auth server-side implementation in the latest version of Next.js,

The message "The property 'layout' is not found on the type 'FC<WrapperProps>' in Next.js" is displayed

declaration of function interface and property that cannot be modified

Transferring the bundle files of one Next.js app to another Next.js app

Defining onClick event in Typescript and React.Konva

Unable to locate the module from my personal library in Typescript

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

One can only iterate through the type 'HTMLCollection' by utilizing the '--downlevelIteration' flag or setting a '--target' of 'es2015' or above

The art of expanding Angular's HTTP client functionality

Is it possible to define a namespaced external module in TypeScript?

"Exploring the power of Angular 16 coupled with Firebase 9 for seamless file

Developing NextJS 13 with App directory integration for socket.io

Solution: The issue where the children's onChange event was not updating the parent in Ant Design was discovered to be due to the Select and Table components nested inside a Tab not changing according to the pageSize

support for fullscreenchange event across different browsers

Error: The build process for Next.js using the command `npm run build`

What steps do I need to take for webpack to locate angular modules?

Develop a JSON parsing function for VUE reusability

Enhancing Vue prop with TypeScript typing