如何将JavaScript React类组件导出到TypeScript文件并正常使用？

现有代码如下：

Login.js（React类组件） #

class Login extends Component {
  constructor(props) {
    super(props);
    this.usernameText = React.createRef();
    this.passwordText = React.createRef();
    this.urlText = React.createRef();
    this.keyPress = this.keyPress.bind(this);
  }

  // 省略其他方法
}
export default Login;

index.ts（导出组件的TS文件） #

const Login = require("./uiManagement/jiraUI/Login/Login");
export {
  Login as JiraUiLogin 
}

在另一个项目中导入使用：

import { Component } from "react";
import { JiraUiLogin } from "infosysta-typescript-core";
class mLogin extends Component {
  render() {
    return (
      <JiraUiLogin />
    )
  }
};
export default mLogin

报错信息 #

JSX元素类型‘JiraUiLogin’没有任何构造函数或调用签名。

问题出在TS文件中用require导入JS默认导出组件时，没有正确获取到组件本身——require会返回一个包含default属性的模块对象，而非组件类。可以通过以下两种方式修复：

1. 修正require的导入方式
   修改index.ts，明确获取默认导出：

const Login = require("./uiManagement/jiraUI/Login/Login").default;
export { Login as JiraUiLogin };

2. 改用ES模块import语法
   更符合TS的模块规范，直接用import导入默认导出：

import Login from "./uiManagement/jiraUI/Login/Login";
export { Login as JiraUiLogin };

进阶优化：添加类型声明文件 #

为了让TS更好地识别JS组件的类型，可以在Login.js同目录下创建Login.d.ts类型声明文件：

import { Component, RefObject, KeyboardEvent } from "react";

declare class Login extends Component {
  usernameText: RefObject<HTMLInputElement>;
  passwordText: RefObject<HTMLInputElement>;
  urlText: RefObject<HTMLInputElement>;
  keyPress: (e: KeyboardEvent) => void;
}

export default Login;

内容的提问来源于stack exchange，提问作者Sora