类型“元素”不可分配给类型“字符串”.ts(2322)

Question

I'm new react typescript developer, here i have a code which works in 'js' 'but when changed to 'tsx' getting error: Type 'Element' is not assignable to type 'string'.ts(2322) it is pointing to 'helperTextt' error (did not find answer else where) should i do: let helperTextt:any = ""; ?

any suggestions?

 let helperTextt = ""; if (event.target.id === "hostname") { if (.HOSTNAME_REGEX.test(event.target.value)) { helperTextt = ( <Trans i18nKey="form.formData;hostNameError"> Invalid Host name </Trans> ); errorr = true; } }

Answer 1

You could do

import { ReactElement } from "react";

and then

let helperTextt: ReactElement | null = null;

Answer 2

Typescript is automatically inferring helperTextt to be a string, if you are certain of its values you can get around this (although it is not preferred to declare type any) by declaring it as type any:

 let helperTextt:any;

Answer 3

you can add type to your helperTextt variable

let helperTextt: JSX.Element = null;

Answer 4

    let helperText: JSX.Element | string = "";

    if (event.target.id === "hostname") {
        if (!HOSTNAME_REGEX.test(event.target.value)) {
          helperText = (
            <Trans i18nKey="form.formData.hostNameError">
              Invalid Host name
            </Trans>
          );
          errorr = true;
        }
      }

Answer 5

Maybe it's an issue related to the inferred type of a variable by Typescript itself, as in my case, I was using title as the name which was initially a string prop to a Component, but later declared it's type to ReactElement which gave this issue, Well, to fix this, I just renamed the prop from title to appTitle and that worked like magic!