How do I type a message in an error function?

Issue

I have an error message function that I want to type. How would I go about that? I don't want to any the message. But it won't be strictly a string either.

// Binding element 'message' implicitly has an 'any' type.ts(7031)
export default function ErrorMessage({ message }) {
    if (!message) return null;
  
    return (
      <div className="alert alert-error mt-5">
        <div className="flex-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="w-6 h-6 mx-2 stroke-current"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
            ></path>
          </svg>
          <label>{message}</label>
        </div>
      </div>
    );
  }
  

Solution

You can make the input parameter optional:

export default function ErrorMessage(message?: string) { ... }

In this case, message can be a string, undefined or null.

You can find more information about optional parameters here:

https://www.typescripttutorial.net/typescript-tutorial/typescript-optional-parameters/

Answered By - MatterOfFact