Leverage the TypeScript compiler (tsc)

[zettca]

UI-Kit releases TypeScript declarations (d.ts) for its components, along with the components written in JavaScript. These declarations are not being automatically validated (validation is done manually and in PR review).

Problem

This lack of TypeScript declaration validation has been leading to various releases with incomplete or incompatible TS declarations (some examples: #2393 #2384 #2250 Tomoto's PRs).

A "post-release validation" can be made in the adoption project, but it being "post-release" still means incorrect declarations are being published to the teams. Besides this, the adoption project has a low component coverage, implementing just a few components (and component variations).

Proposal

Leverage tsc to validate both TypeScript declarations, and overall code quality.

The UI Kit React project already has TypeScript installed and configured. tsc can be used (and has been in the past), used to identify TypeScript declaration issues. The project also has a comprehensive list of component implementations, in *.stories.js and *.stories.test.js (unlike adoption, which only has a few)

If we run npx tsc for *stories.js, we get a long list (hundreds) of problems (many duplicates). Some examples:

• Typescript type declaration

VerticalNavigation.stories.js:108:10 - error TS2741: Property 'onClick' is missing in type '{ label: string; icon: Element; }' but required in type 'HvActionProps'.

• CSS validation

VerticalNavigation.stories.js:352:19 - error TS2322: Type '{ eight: string; }' is not assignable to type 'CSSProperties'.
  
  <div style={{ eight: "600px" }}>

• HTML validation

useImageLoaded.js:16:11 - error TS2551: Property 'srcSet' does not exist on type 'HTMLImageElement'. Did you mean 'srcset'?

• JSDocs validation

focusableElementFinder.js:35:11 - error TS8024: JSDoc '@param' tag has name 'nodeId', but there is no parameter with that name.

[zettca]

UI Kit has since moved to TypeScript 🎉