HTMLImageElement#crossOrigin should use literal union type from allowable values

[thw0rted]

TypeScript Version: Nightly 2020-07-29

Search Terms: htmlimageelement crossorigin

Code

const i = new Image(10, 10);
// @ts-expect-error
i.crossOrigin = "abc"; // Must be "anonymous" or "use-credentials"

Expected behavior:

Type should be defined with string literals, per this MDN page

Actual behavior:

Property is typed as string | null.

---

Playground Link

[RemyMachado]

TS2322: Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.

Currently redefining type for the crossOrigin property on my react App, to avoid this error.

interface Props extends HTMLProps<HTMLImageElement> {
  crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined
}

[DvzH]

Actually this is creating an issue with all the UI libraries such as Material UI, bootstrap etc. It's throws an error saying that the crossOrigin is a required prop even though it was defined as optional in all these above UI lib's. So because of that it requires user to pass crossOrigin as a prop on Input field, Radio and CheckBox etc

ref: creativetimofficial/material-tailwind#427