TypeScript-DOM-lib-generator icon indicating copy to clipboard operation
TypeScript-DOM-lib-generator copied to clipboard

please reconsider to type CSS `width` and `height` attribute more strictly

Open scarf005 opened this issue 2 years ago • 3 comments

This is a continuation of #1179.

Today, I encountered a bug because the component was passed a string ("300") instead of a number (300) or a properly formatted string ("300px"). This error went unnoticed because width and height attributes are currently typed as number | string | undefined.

While I understand that implementing stricter typing could break older code (refer to https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1179#issuecomment-952642724), I believe that the value of TypeScript lies in providing strict, safe typing to prevent potential type errors.

Therefore, i propose we make the type for width and height more strict like as said in #1179 using template literal types.

type Length = number | `${number}${'px'|'cm'|'mm'|'em'}`

I am open to creating a PR for this issue.

scarf005 avatar May 20 '23 00:05 scarf005

It's common question for CSS properties. Length has multiple variants, which can't be described by simple template :(

turansky avatar May 21 '23 21:05 turansky