如何修复 typescript 中的“此表达式不可构造”错误？

Question

I am begginer with ts and react,an I get error while creating a new class object of auth service.

const Auth = new Authentication();

Error

This expression is not constructable. Type 'typeof import("c:/react-js/portfolio/src/Services/IdentityServices/Authentication")' has no construct signatures.

my Authentication Service

import axios from 'axios';

class AuthenticationServices {
  API_URL = 'https://localhost:44382/api/authenticate/';

  login(username: string, password: string) {
    return axios
      .post(this.API_URL + 'login', {
        username,
        password,
      })
      .then((reponse) => {
        if (reponse.data.token) {
          localStorage.setItem('user', JSON.stringify(reponse.data));
        }

        return reponse.data;
      });
  }

  logout() {
    localStorage.removeItem('user');
  }

  register(username: string, password: string, email: string) {
    return axios.post(this.API_URL + 'register', {
      username,
      password,
      email,
    });
  }

  getCurrenUser() {
    let currentUser = localStorage.getItem('user');
    if (currentUser) return JSON.parse(currentUser);

    return 'Current user is empty';
  }
}

My register component:

import React from 'react';
import { Container, Row, Form, Button, Col } from 'react-bootstrap';
import { SubmitHandler, useForm } from 'react-hook-form';
import { RegisterPage } from '../Pages/RegisterPage';
import * as Authentication from '../Services/IdentityServices/Authentication';

type IFormInput = {
  email: string;
  username: string;
  password: string;
};

export const Register = () => {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormInput>();

  const [createUser, setCreateUser] = React.useState<IFormInput>();
  const Auth = new Authentication();
  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    console.log(data);
  };

      return (
        <Container>
          <Row></Row>
          <RegisterPage title="Kayıt Ol">
            <Container>
              <Row className="d-flex justify-content-center   ">
                <Col xs={5} className="shadow-sm p-3 mb-5 bg-body rounded ">
                  <Form onSubmit={handleSubmit(onSubmit)}>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                      <Form.Label>Email adresi</Form.Label>
                      <Form.Control
                        type="email"
                        placeholder="Enter email"
                        {...register('email')}
                      />
                      <Form.Text className="text-muted"></Form.Text>
                    </Form.Group>
    
                    <Form.Group className="mb-3" controlId="formBasicPassword">
                      <Form.Label>Kullanıcı Adı</Form.Label>
                      <Form.Control
                        type="text"
                        placeholder="Kullanı adı"
                        {...register('username')}
                      />
                    </Form.Group>
    
                    <Form.Group className="mb-3" controlId="formBasicPassword">
                      <Form.Label>Şifre</Form.Label>
                      <Form.Control
                        type="password"
                        placeholder="Şifre"
                        {...register('password')}
                      />
                    </Form.Group>
                    <Button variant="primary" type="submit">
                      Kayıt ol
                    </Button>
                  </Form>
                </Col>
              </Row>
            </Container>
          </RegisterPage>
        </Container>
      );
    };

Answer 1

import * as Authentication imports the module's module namespace object , which has properties for each of the module's exports; it's not constructible.

You haven't shown any export of AuthenticationServices , so it's hard to tell you how to import it. If you exported it as a named export (generally preferred), like this:

export AuthenticationServices;

...then you'd import it with {} , like this:

import { AuthenticationServices } from "...";
// or if you want to rename it
import { AuthenticationServices as Authentication } from "...";

If you export it as the default export, like this:

export default AuthenticationServices;

...then you'd import it like this:

import AuthenticationServices from "...";
// Or if you want to use a different name
import Authentication from "...";