问题
我似乎无法在我的 TypeScript 代码中正确导入 MSAL 库。我正在使用 MSAL for JS 库(应该有类型声明),在一个使用 create-react-app with react-typescript 脚本构建的简单 TypeScript/React 项目中。我对 TypeScript 不太熟悉,不确定是否遗漏了一些明显的东西,或者在使用 TypeScript 项目时存在 MSAL 包的问题。
详情:
- 我使用
npm install --save msal
命令从 NPM 安装了 MSAL 包。 - 我尝试使用不同形式的
import {Msal} from 'msal';
将 MSAL 导入到我的 .ts 文件中。 - 这会导致 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 文件的内容时,我没有看到任何导出,而我通常希望看到导出。
- 我尝试使用
npm install --save-dev @types/msal
命令从 @types 中安装声明文件,但是没有找到该文件。 - 我还尝试使用
let Msal = require('Msal');
将其导入到我的文件中,但是会出现 Msal.UserAgentApplication 不是构造函数的错误。 - 我尝试使用 /// 参考指令并将一个脚本标签添加到主 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"
]
}