Weak Typescript support

[relliv]

I want use this library with metronic theme in a angular app but if I import any ktui component CLI is giving many typescript related errors. Type safe usage is very important for better developer experience.

Even in this case dist is not production ready. Plus, I can't disable strict mode use skipLibCheck like temproray solutions because I need to trust my apps.

Example Import:

import { KTToast } from '@keenthemes/ktui/src/components/toast';

CLI Errors:

✘ [ERROR] TS2564: Property '_name' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:23:11:
      23 │   protected _name: string;
         ╵             ~~~~~


✘ [ERROR] TS2564: Property '_defaultConfig' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:24:11:
      24 │   protected _defaultConfig: object;
         ╵             ~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_config' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:25:11:
      25 │   protected _config: object;
         ╵             ~~~~~~~


✘ [ERROR] TS2564: Property '_events' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:26:11:
      26 │   protected _events: Map<string, Map<string, CallableFunction>>;
         ╵             ~~~~~~~


✘ [ERROR] TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'string | HTMLElement'.
  Type 'null' is not assignable to type 'string | HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:31:29:
      31 │     element = KTDom.getElement(element);
         ╵                                ~~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'object'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:46:41:
      46 │ ...cted _fireEvent(eventType: string, payload: object = null): void {
         ╵                                       ~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'object'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:52:45:
      52 │ ... _dispatchEvent(eventType: string, payload: object = null): void {
         ╵                                       ~~~~~~~~~~~~~~~~~~~~~~


�� [ERROR] TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:67:3:
      67 │       this._element,
         ╵       ~~~~~~~~~~~~~


✘ [ERROR] TS2532: Object is possibly 'undefined'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:115:2:
      115 │     this._events.get(eventType).set(eventId, callback);
          ╵     ~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/component.ts:129:22:
      129 │     if (!this._element) return null;
          ╵                         ~~~~~~


✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:167:20:
      167 │           positionGroups.top.push(toast);
          ╵                          ~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:169:20:
      169 │           positionGroups.bottom.push(toast);
          ╵                          ~~~~~~


✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:175:18:
      175 │       positionGroups.top.forEach((toast) => {
          ╵                      ~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:193:31:
      193 │       for (let i = positionGroups.bottom.length - 1; i >= 0; i--) {
          ╵                                   ~~~~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:194:33:
      194 │         const toast = positionGroups.bottom[i];
          ╵                                      ~~~~~~


✘ [ERROR] TS2532: Object is possibly 'undefined'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:263:3:
      263 │       (this.globalConfig.maxToasts || DEFAULT_CONFIG.maxToasts)
          ╵       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2538: Type 'undefined' cannot be used as an index type. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:299:52:
      299 │ ...t kt-alert ${variantMap[options.variant] || ''} ${appearanceMa...
          ╵                            ~~~~~~~~~~~~~~~


✘ [ERROR] TS2538: Type 'undefined' cannot be used as an index type. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:299:92:
      299 │ ...| ''} ${appearanceMap[options.appearance] || ''} ${sizeMap[opt...
          ╵                          ~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2538: Type 'undefined' cannot be used as an index type. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:299:129:
      299 │ ...arance] || ''} ${sizeMap[options.size] || ''} ${options.classN...
          ╵                             ~~~~~~~~~~~~


✘ [ERROR] TS18048: 'maxToasts' is possibly 'undefined'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:400:30:
      400 │ ...f (currentToasts.length >= maxToasts && currentToasts.length >...
          ╵                               ~~~~~~~~~


✘ [ERROR] TS18049: 'remaining' is possibly 'null' or 'undefined'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:467:7:
      467 │               remaining -= Date.now() - startTime;
          ╵               ~~~~~~~~~


✘ [ERROR] TS18049: 'remaining' is possibly 'null' or 'undefined'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:488:19:
      488 │           if (paused && remaining > 0) {
          ╵                         ~~~~~~~~~


✘ [ERROR] TS2345: Argument of type 'number | null | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/components/toast/toast.ts:490:17:
      490 │             startTimer(remaining);
          ╵                        ~~~~~~~~~


✘ [ERROR] TS2345: Argument of type 'string | HTMLElement' is not assignable to parameter of type 'HTMLElement'.
  Type 'string' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:29:21:
      29 │     if (this.isElement(element)) {
         ╵                        ~~~~~~~


✘ [ERROR] TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:34:3:
      34 │       return document.querySelector(KTUtils.parseSelector(element ...
         ╵       ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:37:2:
      37 │     return null;
         ╵     ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement[]'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:156:3:
      156 │       return null;
          ╵       ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:178:34:
      178 │     return children ? children[0] : null;
          ╵                                     ~~~~


✘ [ERROR] TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:294:38:
      294 │     return this.isParentOrElementHidden(element.parentElement);
          ╵                                         ~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/dom.ts:387:4:
      387 │         element.dataset[key],
          ╵         ~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'KTOptionType'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/utils.ts:39:3:
      39 │       return null;
         ╵       ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'JSON'. [plugin angular-compiler]

    node_modules/.pnpm/@keenthemes+ktui@1.0.19/node_modules/@keenthemes/ktui/src/helpers/utils.ts:56:5:
      56 │       : null;

[faizalmy]

Hi,

We are working to solve this issue globally.

https://github.com/keenthemes/ktui/tree/feature/typescript-support

Thanks

[relliv]

@faizalmy still there is no typescript support. Your linked branch does not sync with the main branch.

[steve3d]

Well this is a huge problem, if I simply turn on the strict mode, then try to build the library, there will be over 450 errors.

For now, this library contains so many plain javascript syntax.