Проблема
Я не могу заставить библиотеку MSAL правильно импортировать код typescript. Я использую библиотеку MSAL для JS (которая, как предполагается, имеет типизацию) в простой typescript/реагирующей проектной подкладке, action-app с реакциями typescript. Я новичок в typescript и не уверен, что я пропустил что-то очевидное или возникли проблемы с пакетом MSAL при использовании его с проектами typescript.
Детали:
- Я добавил пакет MSAL из NPM с помощью
npm install --save msal
. - Я попытался импортировать MSAL в мой .ts, используя разные формы
import {Msal} from 'msal';
- Это приводит к ошибке typescript
Could not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type.
- Думая, что это было странно, я посмотрел папку node_module/msal/out и увидел файл "msal.d.ts", чего я ожидал.
- Когда я смотрю содержимое файла msal.d.ts, я не вижу экспорта, который я обычно ожидал увидеть.
- Я попытался установить объявление из @types с помощью
npm install --save-dev @types/msal
, но он не существует. - Я также попытался импортировать его в свой файл с помощью
let Msal = require('Msal');
, но получаю сообщение об ошибке, что Msal.UserAgentApplication не является конструктором. - Мне не очень повезло с использованием справочной директивы///и добавления тега script к основному 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"
]
}