Interface indexes fail to compile

[V-Roger]

Bug Report or Feature Request

- [x] bug report -> please search issues before submitting
- [ ] feature request

CookieConsent and Library Versions?

- cookieconsent version: 3.1.0
- ngx-cookieconsent version: 2.2.0

OS Version?

Windows 10

Angular, Node and al Versions?

Angular CLI: 6.2.1
Node: 11.10.0
OS: win32 x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular-devkit/architect         0.8.1
@angular-devkit/build-angular     0.8.1
@angular-devkit/build-optimizer   0.8.1
@angular-devkit/build-webpack     0.8.1
@angular-devkit/core              0.8.1
@angular-devkit/schematics        0.8.1
@angular/cdk                      6.4.7
@angular/cli                      6.2.1
@angular/flex-layout              6.0.0-beta.18
@angular/material                 6.4.7
@angular/pwa                      0.8.1
@ngtools/webpack                  6.2.1
@schematics/angular               0.8.1
@schematics/update                0.8.1
rxjs                              6.3.1
typescript                        2.9.2
webpack                           4.17.3

Repro steps

• yarn add ngx-cookieconsent
• ng serve

The log given by the failure

ERROR in node_modules/ngx-cookieconsent/model/content-options.d.ts(7,5): error TS2411:
Property 'header' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(8,5): error TS2411: Property
'message' of type 'string | undefined' is not assignable to string index type 'string'.node_modules/ngx-cookieconsent/model/content-options.d.ts(9,5): error TS2411: Property
'dismiss' of type 'string | undefined' is not assignable to string index type 'string'.node_modules/ngx-cookieconsent/model/content-options.d.ts(10,5): error TS2411: Property 'allow' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(11,5): error TS2411: Property 'deny' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(12,5): error TS2411: Property 'link' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(13,5): error TS2411: Property 'href' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(14,5): error TS2411: Property 'close' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/content-options.d.ts(15,5): error TS2411: Property 'policy' of type 'string | undefined' is not assignable to string index type 'string'.node_modules/ngx-cookieconsent/model/content-options.d.ts(16,5): error TS2411: Property 'target' of type 'string | undefined' is not assignable to string index type 'string'.node_modules/ngx-cookieconsent/model/html-elements.d.ts(5,5): error TS2411: Property 'header' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(6,5): error TS2411: Property 'message' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(7,5): error TS2411: Property 'messagelink' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(8,5): error TS2411: Property 'dismiss' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(9,5): error TS2411: Property 'allow' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(10,5): error TS2411: Property 'deny' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(11,5): error TS2411: Property 'link' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/ngx-cookieconsent/model/html-elements.d.ts(12,5): error TS2411: Property 'close' of type 'string | undefined' is not assignable to string index type 'string'.

Desired functionality

The compilation step succeeds

Mention any other details that might be useful

The issue is resolved by changing the typescript index to string | undefined to account for optional properties in the interfaces

[tinesoft]

Hi @V-Roger

Thank you for your ticket. Could you please provide a sample code where you use the configuration types?

Best regards

[V-Roger]

Hi @tinesoft !

I don't actually use the types directly, but the compilation step of my angular app fails with aforementioned errors when using this tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types": [
      "leaflet",
      "jasmine"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "strict": true
  },
}

However if I switch the strict flag to false it works as expected.

[tinesoft]

Hum interesting...

I never noticed this before, because i never had the strict mode on either.

Maybe you can add skipLibCheck, to preventing check on imported libraries type definitons,
while keeping it for your own code?

I will investigate more to understand why the library does not comply with sctict mode...

Stay tuned!

[V-Roger]

Thank you ! skipLibCheck did the trick 👍

As for why this happens I'm not sure, I'll let you investigate on your side as I'm curious to what you find out.

Have a great day !

[tinesoft]

Ok, i found out why you get those nasty errors in strict mode 😄

It is due to changes introduced in v.2.2.0 to allow having custom properties in config objects.

In particular, the part:

[key: string]: string;

in src/model/html-elements.ts and src/model/content-options.ts

It should be:

[key: string]: string | undefined;

In fact, all fields defined in NgcHtmlElements or NgcContentOptions are nullable string(see the ? at the end of each field name). So the actual type is not simply string, but rather string | undefined.

As says in the documentation:

While string index signatures are a powerful way to describe the “dictionary” pattern, they also enforce that all properties match their return type. This is because a string index declares that obj.property is also available as obj["property"]. In the following example, name’s type does not match the string index’s type, and the type checker gives an error:

interface NumberDictionary {
    [index: string]: number;
    length: number;    // ok, length is a number
    name: string;      // error, the type of 'name' is not a subtype of the indexer
}

I'll hotfix this later tonight.

Thanks again for reporting!

Cheers

[V-Roger]

Alright ! Glad you found out where it came from.

And thanks again for the quick answer :)

Cheers

[tinesoft]

Fix released under v2.2.1

Enjoy!