You are unable to utilize 'new' with an expression that does not have a call or construct signature in Typescript

As I venture into creating a SharePoint web part with the latest SharePoint framework that integrates the Microsoft Graph API as outlined here:

I'm utilizing a sample for reference.

The initial steps involved generating a new project using the Yeoman generator for SharePoint.

I proceeded to install Adal: npm install adal-angular

Followed by installing typings for Adal: typings install adal --source dt --global --save

After which, I copied and pasted relevant snippets from the WebPart.tsx file:

const AuthenticationContext = require('adal-angular');
import adalConfig from '../AdalConfig';
import { IAdalConfig } from '../../IAdalConfig';
import '../../WebPartAuthenticationContext';

export default class ReactClient extends React.Component<IReactClientProps, IReactClientState> {
  private authCtx: adal.AuthenticationContext;

  constructor(props: IReactClientProps, state: IReactClientState) {
    super(props);
  }

this.state = {
  loading: false,
  error: null,
  signedIn: false
};

const config: IAdalConfig = adalConfig;
config.popUp = true;
config.webPartId = this.props.webPartId;
config.callback = (error: any, token: string): void => {
  this.setState((previousState: IReactClientState, currentProps: IReactClientProps): IReactClientState => {
    previousState.error = error;
    previousState.signedIn = !(!this.authCtx.getCachedUser());
    return previousState;
  });
};

this.authCtx = new AuthenticationContext(config);
AuthenticationContext.prototype._singletonInstance = undefined;

}

While declaring:

private authCtx: adal.AuthenticationContext;

poses no issues in recognizing the 'adal' namespace defined in the Adal type file.

However, when executing:

this.authCtx = new AuthenticationContext(config);

An error arises stating: Cannot use 'new' with an expression whose type lacks a call or construct signature

Despite the presence of the constructor in the Adal type file, the reason behind this issue remains obscure to me. Seeking insights from the community to resolve this.

Thank you,

Answer №1

Is `AuthenticationContext` currently available? It seems like only `adl.AuthenticationContext` is accessible within the scope.

You can either use:

`this.authCtx = new adl.AuthenticationContext(config);`

or

`import { AuthenticationContext } from 'path/to/adl'`

at the beginning of the file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the correct way to implement the Maybe functor in typing?

I've been working on implementing a Maybe functor, inspired by Dr. Frisby's approach. Here is my code: interface Maybe<T> { isNothing: () => boolean; map: <S>(fn: (x: T) => S) => T extends null | undefined ? Maybe<S& ...

The operation failed with a TypeError because the object does not allow the addition of the newField property

I encountered an error that says: TypeError: Cannot add property newField, object is not extensible Whenever I try to add a new key or change a value, it doesn't work and I'm not sure what the issue is. dynamicFilter; public ionViewWillEnte ...

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

Retrieve the value from an HTML class using Angular

The Person Object has a field called schoolId, but the School object (not shown here) contains the schoolName. I want to display the schoolName in the table data cell instead of the schoolId from the Person Object. How can I achieve this? <tr *ngFor=& ...

Navigate to the parent element in the DOM

Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> ...

Top Method for Dynamically Adding Angular Component on Click Action

As I develop my website, I am faced with the challenge of incorporating multiple components. One specific feature involves allowing users to dynamically add a component of their choice to the "Home" page when they click a button. I have explored three diff ...

TypeScript: When using an API, it consistently returns an empty object with the type { [key: string]: any }

Every time I try to fetch data from the API, it always comes back empty. See example code snippet below: interface DataStore { [key: string]: any, } static GetData = async (req: Request, res: Response): Promise<Response> => { let obj: Dat ...

Developing components and injecting them dynamically in Angular 2 using Typescript remotely

I am currently exploring the potential of Angular 2 as a foundational technology for a flexible administration dashboard, emphasizing the need for extensibility and customization. I envision an environment where external developers can create their own c ...

Finding the right way to cancel a Firestore stream within a Vue component using the onInvalidate callback

Currently, I am utilizing Vue 3 to develop a Firebase composable that is responsible for subscribing to an onSnapshot() stream. I have been attempting to unsubscribe from this stream by invoking the returned unsubscribe() function within both watchEffect ...

Angular 4/2: Exploring the Concept of Method Overloading

Currently, I am working on Angular 4 and have been struggling to find a suitable solution for method overloading in Angular 2 or 4. Can we actually implement method overloading in an Angular service class? I would really appreciate if someone could provide ...

Combining multiple Observables and storing them in an array using TypeScript

I am working with two observables in my TypeScript code: The first observable is called ob_oj, and the second one is named ob_oj2. To combine these two observables, I use the following code: Observable.concat(ob_oj, ob_oj2).subscribe(res => { this.de ...

Encountered an error while trying to access a property in an array from a JSON

Why am I continuously receiving undefined error messages and how can I prevent them when attempting to read json data? Currently, I am delving into Angular and embroiled in a project that involves externally sourced json. Here's a snippet of the json ...

The Angular 2 bootstrap function is throwing an error stating that the argument type AppComponent cannot be assigned to the parameter type Type

Presenting my very first Angular 2 application with a simple Hello World example, inspired by the Angular 2 quick start guide. import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; @Component({ ...

Using TypeScript: How to access the "this" keyword within a method of an unidentified class

Within the code I'm working on, I am defining a new unnamed class that is implementing an interface. private service: CommandService; this.command = new class implements Command { execute(id: string): Promise<Result> { const resultId: st ...

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

User Interface Image I am looking to implement a filter functionality in the FlatList data based on top categories, where the filter button allows for multiple selections. The FlatList data is stored in the HotelData array, and the categories are also re ...

Encountering the TS1005 error in Angular 4.4.7 with Typescript 2.7.2: Missing semi-colon ';' issue

I am encountering numerous errors related to lib.es6.d.ts while trying to build my project. node_modules/typescript/lib/lib.es6.d.ts(20605,14): error TS1005: ';' expected. https://i.sstatic.net/weh53.png tsconfig.json { "compilerOption ...

What is the method to retrieve a chat that has been ended with JavaScript SDK?

Whenever I attempt to retrieve a closed Twilio Conversation on the frontend using the JS SDK, I encounter a "Not found" error. Can closed conversations be fetched? My objective is to enable users to close a conversation while still having access to the m ...

Utilizing moment.js in conjunction with typescript and the module setting of "amd"

Attempting to utilize moment.js with TypeScript 2.1.5 has been a bit of a challenge for me. I went ahead and installed moment using npm : npm install moment --save-dev The d.ts file is already included with moment.js, so no need to install via @typings ...

Data that changes dynamically on a chart

When making a rest call to fetch data, I aim to populate the pieChartData with the obtained information. However, I am facing difficulties in achieving this task. Can someone guide me on how to accomplish this? import { Component, OnInit} from '@angu ...

Is there a way to change a typescript enum value into a string format?

I'm working with enums in TypeScript and I need to convert the enum value to a string for passing it to an API endpoint. Can someone please guide me on how to achieve this? Thanks. enum RecordStatus { CancelledClosed = 102830004, Completed = ...