How to overwrite size property?

[nook24]

Hi, I have a .btn-xs css class and trying to add this to the size property. Unfortunately I don't know how I can overwrite the original type definition, without copy&paste the whole file.

https://github.com/coreui/coreui-angular/blob/e2b99d79b1675bf276322399af0d07a78665303f/projects/coreui-angular/src/lib/button/button.directive.ts#L35-L39

I tried it like so

export class XsButtonDirective extends ButtonDirective{

  /**
   * Size the component small or large.
   * @type {'xs' | 'sm' | 'lg'}
   */
  @Input() override size?: 'xs' | 'sm' | 'lg' | '' = '';

}

But this errors out with

✘ [ERROR] TS2416: Property 'size' in type 'XsButtonDirective' is not assignable to the same property in base type 'ButtonDirective'.
  Type '"" | "sm" | "lg" | "xs" | undefined' is not assignable to type '"" | "sm" | "lg" | undefined'.
    Type '"xs"' is not assignable to type '"" | "sm" | "lg" | undefined'. [plugin angular-compiler]

[xidedix]

@nook24

• what's your version of @coreui/angular?

quick and dirty workarounds:

1. use btn-xs class directly, or
2. suppress with @ts-ignore

[nook24]

I am using @coreui/angular 5.0.1 and also came up with the ts-ignore variant like so

export class XsButtonDirective extends ButtonDirective {

  // Override the size property defined in the original ButtonDirective
  // @ts-ignore
  @Input() override size?: 'xs' | 'sm' | 'lg' | '';

  constructor() {
    super();
  }
}

I guess that's fine for me :)

[xidedix]

@nook24 thanks for the follow up! We are considering implementing generics to enable users to employ custom types in these situations.