[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

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.