Property 'change' in type 'Toggle' is not assignable to the same property in base type 'Checkbox'.

[huineng]

Typescript error

angular 10
typescript : 3.9.5
carbon: 10.13.0

Detailed description

ERROR in node_modules/carbon-components-angular/toggle/toggle.component.d.ts:96:5 - 
error TS2416: Property 'change' in type 'Toggle' is not assignable to the same property 
in base type 'Checkbox'.

[huineng]

some more details

./node_modules/carbon-components-angular/toggle/toggle.component.d.ts:95:5 
    TS2416: Property 'change' in type 'Toggle' is not assignable to the same property in base type 'Checkbox'.
  Type 'EventEmitter<ToggleChange>' is not assignable to type 'EventEmitter<CheckboxChange>'.
    Types of property 'observers' are incompatible.
      Type 'Observer<ToggleChange>[]' is not assignable to type 'Observer<CheckboxChange>[]'.
        Type 'Observer<ToggleChange>' is not assignable to type 'Observer<CheckboxChange>'.
          Type 'CheckboxChange' is not assignable to type 'ToggleChange'.

[WilliamMilne]

@cal-smith this is the issue that we're experiencing. Do you think downgrading to an older version might help? I feel like I saw something about that fixing an issue with Angular 10?

Thanks again for all of your help!

[mattgills]

@cal-smith @WilliamMilne It looks like this was more of a TypeScript error. Our previous tsconfig.json was

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom", "esnext.asynciterable"]
  }
}

We needed to add the following line to compilerOptions:

"strictFunctionTypes": false,

I worked off this response in a TypeScript issue thread.

[cal-smith]

Ah interesting 🤔 I think the issue we're having may come from how we're doing inheritance in this case, and the base types not being generic enough. I think the full solution here would be to fully decouple Checkbox and Toggle so we don't end up with these weird types

We might be able to introduce a generic base class that keeps the shared sections, though I'm not sure how much of there there is.

[carbon-bot]

🎉 This issue has been resolved in version 4.34.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[huineng]

great !