[Typing Error] Error TS2536 Typescript compilation errors

[kellscode]

Description

The project should build without compilation errors but instead faced typescript compilation errors that occured in @carbon/ibmdotcom-web-components.

This happens after upgrading to typescript >= 4.4.2 and does not occur in older versions.

Component(s) impacted

@carbon/ibmdotcom-web-components result in a typescript compilation error when typescript is upgraded to version >= 4.4.2.

Following is the error message:

Error: node_modules/@carbon/ibmdotcom-web-components/es/components/expressive-modal/expressive-modal-close-button.d.ts:38:1366 - error TS2536: Type 'K' cannot be used to index type 'HTMLElementEventMap'.

38         addEventListener<K extends "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "abort" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "blur" | "cancel" | "canplay" | "canplaythrough" | "change" | "click" | "close" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "error" | "focus" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "pause" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "reset" | "resize" | "scroll" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;

Adding  "skipLibCheck": true in CompilerOptions resolve error since it skips type checking of declaration files.

Browser

Safari

Carbon Web Components version

v.1.21.0

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

angular

CodeSandbox example

https://codesandbox.io/s/carbon-type-error-4wpl5i?file=/package.json

Steps to reproduce the issue (if applicable)

Manually force the typescript compiler when running the project.

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[abdonrd]

Maybe related? https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9044

[xkotj]

Hello,

there are two solutions for this issue: "skipLibCheck": true in tsconfig.json

or better one I think:

for example in button.d.ts

closest<K_2 extends "object" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr">(selector: K_2): HTMLElementTagNameMap[K_2] | null;

change to this

closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;

I saw 16 lines with same issue in button.d.ts

After this fix it seems to be ok.

Automation FIX in project

find node_modules/carbon-web-components/es/components -iname "*.d.ts" -exec sed -E -e 's/extends\s".+"/extends FIXME/g' -i '{}' \; 
find node_modules/carbon-web-components/es/components -iname "*.d.ts" -exec sed -E -e 's/(.+?)FIXME(>.+\s(.+?)\[.+?\].+)/\1keyof \3\2/g' -i '{}' \; 
find node_modules/carbon-web-components/es/components -iname "*.d.ts" -exec sed -E -e 's/keyof HTMLCollectionOf</keyof /g' -i '{}' \;
find node_modules/carbon-web-components/es/components -iname "*.d.ts" -exec sed -E -e 's/keyof NodeListOf</keyof /g' -i '{}' \;

Almost every component now works after theese commands with Typescript

For example does not work, but this is connected to other issue and flatpickr library

<bx-date-picker>
  <bx-date-picker-input label-text="Date Picker label" placeholder="mm/dd/yyyy"> </bx-date-picker-input>
</bx-date-picker>
Uncaught SyntaxError: The requested module './../../../node_modules/flatpickr/dist/flatpickr.js' does not provide an export named 'default' (at date-picker.ts:11:8)

Best Regards, JK