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

Issue encountered: Upon executing 'ng add @angular/fire', an error was detected in the node_modules/firebase/compat/index.d.ts file while attempting to launch the Angular application

Encountering issues with dependencies while updating React results in deployment failure for the React app

Having trouble with creating a new Next.js app using the latest version with npx?

All authentication logic in Angular encapsulated within the service

The existence of useRef.current is conditional upon its scope, and it may be null in certain

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Nativescript encountered an error regarding faker: module './address' not found

What is the designated color for highlighting an option in Next.js?

What is the proper way to utilize setTimeout in TypeScript?

Switching from a TypeOrm custom repository to Injectable NestJs providers can be a smooth transition with the

How to retrieve a value only if it is truthy in JavaScript or TypeScript - Understanding the operator

When using Next JS with StoryBook, an error may occur if styles are written in a module.scss file

Having trouble with @typescript-eslint/member-ordering feature not functioning properly?

Obtain both the key and value from an Object using Angular 2 or later

Issues with Tagged Union Types in Visual Studio Code

The upcoming page.tsx export force-dynamic is failing to render dynamically

Encountering an issue with MUI 5 where it is unable to access properties of undefined when utilizing makestyles

Is it possible to indicate the base type for a generic function?

Transmitting FormData via 2 API endpoints in NextJS

Embracing the power of dynamic imports in Next.js 10 with SDK integration for