Issue
I'm encountering difficulties importing the MSAL library into my TypeScript code. I am using the MSAL for JS library with typings in a basic TypeScript/React project created using create-react-app with react-typescript scripts. As someone who is new to TypeScript, I'm unsure if I'm overlooking something obvious or if there's an issue with the MSAL package when it comes to TypeScript projects.
Specifics:
- I added the MSAL package from NPM using
npm install --save msal. - I tried different ways of importing MSAL into my .ts file, such as
import {Msal} from 'msal'; - This led to a TypeScript error stating
Could not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type. - Upon inspecting the node_module/msal/out folder, I found a 'msal.d.ts' file, which I anticipated.
- In examining the contents of the msal.d.ts file, I noticed that there were no exports, which seemed unusual.
- I attempted to install the @types declaration using
, but it was not available.npm install --save-dev @types/msal - Trying to import it with
let Msal = require('Msal');resulted in an error stating that Msal.UserAgentApplication is not a constructor. - Using the /// reference directive and adding a script tag to the main index.html also did not seem like the correct approach to resolving the issue.
ExampleMsal.ts
import { observable, action, computed } from 'mobx';
import * as Msal from 'msal';
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) {
// callback after loginRedirect OR acquireTokenRedirect
}
);
userAgentApplication.loginPopup(['user.read']).then(function(token: string) {
let user = userAgentApplication.getUser();
if (user) {
alert('success');
} else {
alert('fail');
}
}, function (error: string) {
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"
]
}