使用typescript的react应用程序出现Highcharts错误#13

我有一个问题是关于 this 话题我是TS的新手,我根据 this 指导然而,当我尝试在应用程序中添加highchart时。tsx如下:

import * as React from 'react';
import './App.css';
import * as Highcharts from "highcharts";

let myChart = Highcharts.chart("App",{
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

class App extends React.Component {
  render() {
    return (
      <div id="App">
          {myChart}
      </div>
    );
  }
}

export default App;

发生的是,当运行npm run start时,我得到以下错误。我错过了什么?

Error: Highcharts error #13: www.highcharts.com/errors/13
▶ 9 stack frames were collapsed.
./src/App.tsx
D:/Programming/Bitbucket/report-example/src/App.tsx:5
  2 | import './App.css';
  3 | import * as Highcharts from "highcharts";
  4 | 
> 5 | let myChart = Highcharts.chart("main",{
  6 |     chart: {
  7 |         type: 'bar'
  8 |     },
View compiled
▶ 2 stack frames were collapsed.
./src/index.tsx
D:/Programming/Bitbucket/report-example/src/index.tsx:1
> 1 | import * as React from 'react';
  2 | import * as ReactDOM from 'react-dom';
  3 | import App from './App';
  4 | import './index.css';
View compiled
▶ 6 stack frames were collapsed.

编辑:

我想出了一个办法让它工作。但对于这个解决方案,我仍然有两个问题:

1) 为什么它与componentDidMount一起工作?

2) 我可以用let在App类之外定义图表吗?

import * as React from 'react';
import './App.css';
import * as Highcharts from "highcharts";

class App extends React.Component{
    componentDidMount(){
        Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    }
    render() {
        return (
            <div>
                <div id="container">loading </div>
            </div>
        )
    }
}

export default App;