Problema

Parece que no puedo lograr que la biblioteca MSAL se importe correctamente en mi código mecanografiado. Estoy usando elMSAL para JS biblioteca (que se supone que tiene tipings) en un proyecto de mecanografiado simple / reactivo scaffolded usando la aplicación create-react-app con scripts react-typescript. Soy nuevo en typecript y no estoy seguro si me falta algo obvio o si hay un problema con el paquete MSAL cuando lo uso con proyectos de typecript.

Detalles:Agregué el paquete MSAL de NPM usandonpm install --save msal.Intenté importar el MSAL en mis archivos .ts usando diferentes formas deimport {Msal} from 'msal';Esto da como resultado un error mecanografiadoCould not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type.Pensando que era extraño, miré la carpeta node_module / msal / out y vi un archivo 'msal.d.ts', que es lo que esperaría.Cuando miro el contenido de lamsal.d.ts archivo, no veo ninguna exportación, que normalmente esperaría ver.Intenté instalar la declaración de @types usandonpm install --save-dev @types/msal, pero no existeTambién intenté importarlo a mi archivo usandolet Msal = require('Msal');, pero recibe un error de que Msal.UserAgentApplication no es un constructor.No tuve mucha suerte al intentar usar la directiva de referencia /// y agregar una etiqueta de script al index.html principal. Esto tampoco parece ser la forma correcta de resolver el problema.ExampleMsal.ts

import { observable, action, computed } from 'mobx';
import * as Msal from 'msal'; // <-- This line gives the error

class ExampleMsal{
    @observable 
    private _isLoggedIn: boolean;

    constructor() {
        this._isLoggedIn = false;
    }

    @computed 
    get isLoggedIn(): boolean {
        return this._isLoggedIn;
    }

    @action 
    signIn() {

        let userAgentApplication = new Msal.UserAgentApplication('<client-id>', null, 
        function (errorDes: string, token: string, error: string, tokenType: string) {
            // this callback is called after loginRedirect OR acquireTokenRedirect 
            // (not used for loginPopup/aquireTokenPopup)
        }
        );

        userAgentApplication.loginPopup(['user.read']).then(function(token: string) {
            let user = userAgentApplication.getUser();
            if (user) {
                // signin successful
                alert('success');
            } else {
                // signin failure
                alert('fail');
            }
        }, function (error: string) {
            // handle error
            alert('Error' + error);
        });        
        this._isLoggedIn = true;
    }

    @action 
    signOut() {
        this._isLoggedIn = false;
    }
}

export default ExampleMsal;

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}