JSXで定義された既存のReactコンポーネントをTypescriptモジュール（.tsx）でインポートする方法

Question

JSXでコード化された既存のReactコンポーネントがあり、現時点ではTypescriptに変換できません。私はTypescriptで書かれている新しいReactアプリケーションでそれを利用したいと思います。 TSXコード内でJSXコードをインポートして使用できるかどうかはわかりません。これは可能ですか？どうすればいいのですか？以下

おかげ

の例は、エラーを与える：TS2604:JSX element type 'OldCode' does not have any construct or call signatures.あなたのimport文変更しようと

OldCode.jsx

import React from 'react' 

export default React.createClass({ 
    render() { 
    return <div>OldCode</div> 
    } 
}) 

NewCode.tsx

import * as React from 'react'; 
import { OldCode } from './OldCode'; 

export default class NewCode extends React.Component<any, any> { 
    render() { 
    return (
     <OldCode/> 
    ); 
    } 
} 

Answer 1

：

を

import OldCode from './OldCode'; 

webpackを使用している場合は、リゾルバにも.jsxを追加する必要があります。

Answer 2

declare module '*.jsx' { 
    var _: React.Component<any, any>; 
    export default _; 
} 

、それがtsconfig.jsonに含まれていることを確認し、いくつかのファイルでこれを入れ

import OldCode from './OldCode.jsx'; 

のようにそれを使用しています。

もちろん、webpackがそれらをすべてパックしていることを確認してください。