Type 'string' is not assignable to type 'T'. using typescript

Question

I have the next scenario:

export type TagType = 'input' | 'textarea';

interface ContainerProps<T extends TagType> {
  title: string;
  as: T;
  className?: string;
}

My component looks like this:

const Container = <T extends TagType>({
  title,
  as: HTMLEl = 'input',
  ...rest
}: ContainerProps<T> &
  (
    | React.TextareaHTMLAttributes<HTMLTextAreaElement>
    | React.InputHTMLAttributes<HTMLInputElement>
  )) => { ... }

The issue appears as: HTMLEl = 'input', with the next message:

TS2322: Type '"input"' is not assignable to type 'T'.   '"input"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'ElementType'.

Question: Why this issue appear and how to solve it?

Answer 1

you must specify the "input" type.

as: HTMLEl = "input" as T,