jsで作成したcreate--react-appで作成したプロジェクトをtypescript化したい

Question

https://create-react-app.dev/docs/adding-typescript/ を参考に

src/index.js to src/index.tsx のリネームしてビルドができました。
しかし、 https://qiita.com/alfe_below/items/1cb81a6a03d8d6d73b27 を参考に
他の .jsも1ファイルだけ .ts にしたのですが、今度はビルドが通りません。

Failed to compile.

./src/Button.tsx
  Line 17:8:  Parsing error: '>' expected

下記はtypescript化にした。コードです。
エラーになっている行は取るはずのjsx部分のコードです。

import React from 'react';

interface Props {
  handleClick: func
}
interface State {}

class Button extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.handleClick = props.handleClick.bind(this);
  }

  render() {
    return (
      <button
        onClick={this.handleClick}
      >
        Exchange
      </button>
    )
  }
}

export default Button;

エラーのスタックトレースも出ておらず、何を調べていいのかがわからない状況です。
こういう時は何から調べればよいのでしょうか？

Answer 1

TypeScript で JSX 構文を使うには、拡張子を .ts ではなく .tsx にする必要があります。