元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型 - TypeScript 错误

Question

  const [basicDetails, setBasicDetails] = useState({
    companyName: "",
    pocName: "",
    pocEmail: "",
    pocMobile: "",
    businessCard: { file: "", type: "", url: "" },
    companyBaseAddress: [defaultAddress]
  });

  const [errorMessage, setErrorMessage] = useState({
    companyName: "",
    pocName: "",
    pocEmail: "",
    pocMobile: "",
    businessCard: { file: "", type: "", url: "" },
    companyBaseAddress: [defaultAddress]
  });

const validation = () => {
    Object.keys(errorMessage).map((field => basicDetails[field] === "" ?
      setErrorMessage(prevState => ({ ...prevState, [field]: "Can not be Empty" })) : null));
  };

Error is -> Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ companyName: string; pocName: string; pocEmail: string; pocMobile: string; businessCard: { file: string; type: string; url: string; }; companyBaseAddress: { line1: string; line2: string; city: string; region: string; zip_code: string; country: string; }[]; }'. No index signature with a parameter of type 'string' was found on type '{ companyName: string; pocName: string; pocEmail: string; pocMobile: string; businessCard: { file: string; type: string; url: string; }; companyBaseAddress: { line1: string; line2: string; city: string; region: string; zip_code: string; country: string; }[]; }'

Answer 1

I had this issue in the past as well. You may want to try to create an interface for both your states basicDetails and errorMessages :

interface BasicDetailsInterface {
  [key: string]: string,
  companyName: string,
  pocName: string,
  pocEmail: string,
  // continue for other props
}

interface ErrorMessageInterface {
  [key: string]: string,
  companyName: string,
  pocName: string,
  pocEmail: string,
  // continue for other props
}

And then update the declaration of your states to reflect the interfaces you just created:

const [basicDetails, setBasicDetails] = useState<BasicDetailsInterface>({

const [errorMessage, setErrorMessage] = useState<ErrorMessageInterface>({