build: Added additional typescript check in CI builds (#1717)

Author: rkaraivanov

package.json

@@ -25,7 +25,9 @@
     "build:meta": "node scripts/build-stories.mjs",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
-    "check": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
+    "check-imports": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
+    "check-types": "tsc -p scripts/tsconfig-ci.json",
+    "check": "npm run check-imports && npm run check-types",
     "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
     "clean:dist": "rimraf ./dist",
     "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",

scripts/tsconfig-ci.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

src/components/dialog/dialog.ts

@@ -241,14 +241,14 @@ export default class IgcDialogComponent extends EventEmitterMixin<
 
   protected override render() {
     const label = this.ariaLabel ? this.ariaLabel : undefined;
-    const labelledby = label ? undefined : this.titleId;
+    const labelledBy = label ? undefined : this.titleId;
     const backdropParts = {
       backdrop: true,
       animating: this.animating,
     };
     const baseParts = {
       base: true,
-      titled: this.titleElements.length > 0 || this.title,
+      titled: this.titleElements.length > 0 || !!this.title,
       footed: this.footerElements.length > 0 || !this.hideDefaultAction,
     };
 
@@ -261,7 +261,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
         @click=${this.handleClick}
         @cancel=${this.handleCancel}
         aria-label=${ifDefined(label)}
-        aria-labelledby=${ifDefined(labelledby)}
+        aria-labelledby=${ifDefined(labelledBy)}
       >
         <header part="title" id=${this.titleId}>
           <slot name="title"><span>${this.title}</span></slot>

src/components/input/input-base.ts

@@ -178,7 +178,7 @@ export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(
       <div
         part=${partMap({
           ...this.resolvePartNames('container'),
-          labelled: this.label,
+          labelled: !!this.label,
         })}
       >
         <div part="start">${this.renderPrefix()}</div>

src/components/select/select.ts

@@ -593,7 +593,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   }
 
   protected renderToggleIcon() {
-    const parts = { 'toggle-icon': true, filled: this.value! };
+    const parts = { 'toggle-icon': true, filled: !!this.value };
     const iconHidden = this.open && !isEmpty(this._expandedIconSlot);
     const iconExpandedHidden = !iconHidden;
 

src/components/textarea/textarea.ts

@@ -471,8 +471,8 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
       <div
         part=${partMap({
           ...this._resolvePartNames(),
-          labelled: this.label,
-          placeholder: this.placeholder,
+          labelled: !!this.label,
+          placeholder: !!this.placeholder,
         })}
       >
         <div part="start">${this._renderPrefix()}</div>