CODEWITHSUNDEEP
javascriptreactjstypescript
Sora
Sora

Reputation: 2551

Exporting a JavaScript React Class Component into a TypeScript file

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: enter image description here

Upvotes: 7

Views: 387

Answers (2)

Codepressed
Codepressed

Reputation: 50

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;

Upvotes: 1

Ben RDN
Ben RDN

Reputation: 1

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

Upvotes: 0

Related Questions