Typescript: has no property '...' and no string index signature

[VSDekar]

I am not sure if this is a TypeScript issue or a library issue, but maybe someone else with more experience could help to hunt the bug down.

TypeScript Version: 2.5.3

I am trying to use TypeScript in a SPA Application with the msal.js library

msal.js
https://github.com/AzureAD/microsoft-authentication-library-for-js
msal comes along with a msal.d.ts file.

in this d.ts file the relevant declaration is the following:

declare namespace Msal {
    type tokenReceivedCallback = (errorDesc: string, token: string, error: string, tokenType: string) => void;
    class UserAgentApplication {
        ...
        constructor(clientId: string, authority: string, tokenReceivedCallback: tokenReceivedCallback, {validateAuthority, cacheLocation, redirectUri, postLogoutRedirectUri, navigateToLoginRequestUrl}?: {
            validateAuthority?: boolean;
            cacheLocation?: string;
            redirectUri?: string;
            postLogoutRedirectUri?: string;
            navigateToLoginRequestUrl?: boolean;
        });
        ...

When i use just 3 paramteres of the constructor everything works fine.
When i use the 4th (optional) parameter i get an error on compilation:

ERROR in C:\Users\RemoFischer\Desktop\VueTemplate\node_modules\msal\out\msal.d.ts
    (329,105): error TS2459: Type '{ validateAuthority?: boolean | undefined; cacheLocation?: string | undefined; redirectUri?: stri...' has no property 'validateAuthority' and no string index signature.

    ERROR in C:\Users\RemoFischer\Desktop\VueTemplate\node_modules\msal\out\msal.d.ts
    (329,124): error TS2459: Type '{ validateAuthority?: boolean | undefined; cacheLocation?: string | undefined; redirectUri?: stri...' has no property 'cacheLocation' and no string index signature.

    ERROR in C:\Users\RemoFischer\Desktop\VueTemplate\node_modules\msal\out\msal.d.ts
    (329,139): error TS2459: Type '{ validateAuthority?: boolean | undefined; cacheLocation?: string | undefined; redirectUri?: stri...' has no property 'redirectUri' and no string index signature.

    ERROR in C:\Users\RemoFischer\Desktop\VueTemplate\node_modules\msal\out\msal.d.ts
    (329,152): error TS2459: Type '{ validateAuthority?: boolean | undefined; cacheLocation?: string | undefined; redirectUri?: stri...' has no property 'postLogoutRedirectUri' and no string index signature.

    ERROR in C:\Users\RemoFischer\Desktop\VueTemplate\node_modules\msal\out\msal.d.ts
    (329,175): error TS2459: Type '{ validateAuthority?: boolean | undefined; cacheLocation?: string | undefined; redirectUri?: stri...' has no property 'navigateToLoginRequestUrl' and no string index signature.

Repro

dotnet new --install Microsoft.AspNetCore.SpaTemplates
dotnet new vue
npm install
npm install --save msal

Add somewhere in code the following lines: 
import "msal";

const userAgentApplication = new Msal.UserAgentApplication("clientId", "authority", (errorDescription, token, error, tokenType) => {
            // callback
        }, { cacheLocation: "localStorage"});


webpack --config webpack.config.vendor.js
webpack // <--- Error

I have tried the Angular template, React template and Vue template. There is NO error with the Angular template but with the React and Vue template.

Is it a configuration issue? A TypeScript issue? A library issue?

Because of the error message i think it has something todo with TypeScript.

[kitsonk]

Why do you think this is a TypeScript issue? It is far more likely an issue with the typings you are using. This is not a support forum.

Questions should be asked at StackOverflow or on Gitter.im.

[VSDekar]

Because it happens at compile time with a TypeScript error and the typings seem ok.

I am sorry if i am at the wrong place. I just wanted to help here and gave as much information as possible to reproduce the error.

[andy-ms]

There's no error if I just do npm install msal and copy-paste your code example into a simple TypeScript project. Can you come up with a pure-TypeScript repro of the error?

[VSDekar]

No i am sorry. I have tried to make a pure-TypeScript repo, but i got no error. Thats why i have tried multiple dotnet templates to find out if its just my project or others projects too and it seems that other project also got this error.

[andy-ms]

You could just take a failing example and try compiling it with tsc.

[VSDekar]

After some research i found this one:
https://github.com/Microsoft/TypeScript/issues/8681

Could this error be caused by the typing where the optional argument is deconstructed?

I found out, that when i set the setting skipLibCheck: true or strictNullCHecks: false the error went away and thats why the angular template is working.

So it's caused by the typings? It would be nice if someone could explain me this, so that i can open an issue in the msal.js repo. I have still some trouble with understanding typescript.

[andy-ms]

This is strange: I can reproduce this bug in the editor, but not with tsc. And I only see the error in msal.d.ts if I actually invoke the constructor.
We actually should be giving this error, consistently. I don't have --skipLibCheck on, so I would expect to get errors in .d.ts files in a command-line compilation. My tsconfig.json is just:

{
    "compilerOptions": {
        "strict": true,
        "noEmit": true
    }
}

and I have a single file a.ts containing:

/// <reference types="msal"/>
const userAgentApplication = new Msal.UserAgentApplication("clientId", "authority", (errorDescription, token, error, tokenType) => {
    // callback
}, { cacheLocation: "localStorage"});

[RyanCavanaugh]

Please log a new issue with a standalone repro if this is still a problem. Thanks!