Как правильно импортировать и использовать MSAL (библиотеку аутентификации Microsoft для js) в одностраничное приложение для реагирования на машинописный текст?

Проблема

Кажется, я не могу заставить библиотеку MSAL правильно импортировать в мой машинописный код. Я использую библиотеку MSAL для JS (которая должна иметь typings) в простом проекте typescript / react, созданном с помощью приложения create-react-app со сценариями react-typescript. Я новичок в машинописном тексте и не уверен, что мне не хватает чего-то очевидного или есть проблема с пакетом MSAL при его использовании с проектами машинописного текста.

Подробности:

1. Я добавил пакет MSAL из NPM, используя npm install --save msal.
2. Я попытался импортировать MSAL в свой .ts, используя разные формы import {Msal} from 'msal';
3. Это приводит к ошибке машинописного текста Could not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type.
4. Подумав, что это было странно, я посмотрел на папку node_module / msal / out и увидел файл msal.d.ts, чего я и ожидал.
5. Когда я смотрю на содержимое msal.d.ts, я не вижу экспорта, которого я обычно ожидал бы увидеть.
6. Я попытался установить объявление из @types с помощью npm install --save-dev @types/msal, но его не существует.
7. Я также попытался импортировать его в свой файл с помощью let Msal = require('Msal');, но получил сообщение об ошибке, что Msal.UserAgentApplication не является конструктором.
8. Мне не повезло с попыткой использовать директиву /// reference и добавить тег скрипта в основной index.html. Это также не похоже на правильный способ решения проблемы.

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"
  ]
}