Exporting a JavaScript React Class Component into a TypeScript file

Question

Is there a way to export a JavaScript React Class Component into a TypeScript file?

I have the following code:

Login.js

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

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

In another project i did an npm import for the above to use the login component:

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

But I'm having the following error:

what is the value of moduleResolution property in your tsconfig.json file? — dreygur
– dreygur, Commented Jan 30, 2023 at 9:31
There might be wrong path in index.ts then. Please check the path first — dreygur
– dreygur, Commented Jan 30, 2023 at 10:20
const Login = require("./uiManagement/jiraUI/Login/Login.js"); try adding the extension, if that doesn't work use import instead of require — JimithyPicker
– JimithyPicker, Commented Jan 31, 2023 at 18:28

Samyar · Accepted Answer · 2023-02-04 22:04:49Z

1

What about changing the Login.js file to typescript?

import React, { Component } from "react";

interface Props {
}
interface State {

}

class Login extends Component<Props, State> {
  usernameText = React.createRef<HTMLInputElement>();
  passwordText = React.createRef<HTMLInputElement>();
  urlText = React.createRef<HTMLInputElement>();
  keyPress = (event: React.KeyboardEvent) => {
    
  };
}

export default Login;

edited Feb 4, 2023 at 22:04

Samyar

5337 silver badges21 bronze badges

answered Feb 2, 2023 at 11:22

Codepressed

507 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sora Over a year ago

that's what i did eventually and i used rollup to export my library and it worked

Ben RDN · Accepted Answer · 2023-02-04 21:49:11Z

0

I think that you need to add "allowJs": true in the compilerOptions of your tsconfig file, and use an import statement instead of require.

answered Feb 4, 2023 at 21:49

Ben RDN

1

Collectives™ on Stack Overflow

Exporting a JavaScript React Class Component into a TypeScript file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related