fix(types): fix types error

Author: kagawagao

__tests__/plots/line.spec.tsx

@@ -2,7 +2,8 @@ import React, { createRef } from 'react'
 import ReactDOM from 'react-dom'
 import LineChart from '../../src/plots/line'
 import StateManagerProvider from '../../src/components/state-manager'
-import { StateManager } from '@antv/g2plot'
+import { StateManager, LineConfig } from '@antv/g2plot'
+import BasePlot from '@antv/g2plot/lib/base/plot'
 
 describe('LineChart', () => {
   test('render without crashed', () => {
@@ -11,8 +12,8 @@ describe('LineChart', () => {
   })
 
   test('object ref should be assigned', () => {
-    const ref = createRef<any>()
-    const chartRef = createRef()
+    const ref = createRef<HTMLDivElement | null>()
+    const chartRef = createRef<BasePlot<LineConfig> | null>()
     const div = document.createElement('div')
     ReactDOM.render(<LineChart data={[]} ref={ref} chartRef={chartRef} />, div)
     expect(ref.current).toBeDefined()
@@ -25,7 +26,7 @@ describe('LineChart', () => {
       expect(instance).toBeTruthy()
     }
     const div = document.createElement('div')
-    ReactDOM.render(<LineChart data={[]} ref={getChart} />, div)
+    ReactDOM.render(<LineChart data={[]} chartRef={getChart} />, div)
 
     // expect(chart).toBeDefined()
   })

src/components/base/index.tsx

@@ -71,7 +71,7 @@ const syncRef = <C extends PlotConfig>(
 export interface BaseChartProps<C extends PlotConfig>
   extends Pick<HTMLAttributes<HTMLDivElement>, PickedAttrs> {
   chart: Plot<C>
-  chartRef: Ref<BasePlot<C, LayerCtor<C>> | null>
+  chartRef?: Ref<BasePlot<C, LayerCtor<C>> | null>
   stateManager?: StateManagerCfg
 }
 
@@ -94,7 +94,6 @@ const BaseChart = <C extends PlotConfig>(
   const isFirstRenderRef = useRef<boolean>(true)
 
   useImperativeHandle(ref, () => containerRef.current)
-  useImperativeHandle(chart, () => chartRef.current)
 
   useEffect(() => {
     const { current: container } = containerRef
@@ -148,5 +147,5 @@ const BaseChart = <C extends PlotConfig>(
 }
 
 export default forwardRef(BaseChart) as <C extends PlotConfig>(
-  p: BaseChartProps<C> & RefAttributes<BasePlot<C, LayerCtor<C>> | null>
+  p: BaseChartProps<C> & RefAttributes<HTMLDivElement | null>
 ) => ReactElement

src/plots/area/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Area, AreaConfig, Base as BasePlot } from '@antv/g2plot'
+import { Area, AreaConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type AreaChartProps = Omit<BaseChartProps<AreaConfig>, 'chart'> &
   AreaConfig
 
-const AreaChart = forwardRef<BasePlot<AreaConfig>, AreaChartProps>(
+const AreaChart = forwardRef<HTMLDivElement | null, AreaChartProps>(
   (props, ref) => {
     return <BaseChart chart={Area} ref={ref} {...props} />
   }

src/plots/bar/index.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
-import { Bar, BarConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bar, BarConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BarChartProps = Omit<BaseChartProps<BarConfig>, 'chart'> & BarConfig
 
-const BarChart = forwardRef<BasePlot<BarConfig>, BarChartProps>(
+const BarChart = forwardRef<HTMLDivElement | null, BarChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bar} ref={ref} {...props} />
   }

src/plots/bubble/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Bubble, BubbleConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bubble, BubbleConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BubbleChartProps = Omit<BaseChartProps<BubbleConfig>, 'chart'> &
   BubbleConfig
 
-const BubbleChart = forwardRef<BasePlot<BubbleConfig>, BubbleChartProps>(
+const BubbleChart = forwardRef<HTMLDivElement | null, BubbleChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bubble} ref={ref} {...props} />
   }

src/plots/bullet/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Bullet, BulletConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bullet, BulletConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BulletChartProps = Omit<BaseChartProps<BulletConfig>, 'chart'> &
   BulletConfig
 
-const BulletChart = forwardRef<BasePlot<BulletConfig>, BulletChartProps>(
+const BulletChart = forwardRef<HTMLDivElement | null, BulletChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bullet} ref={ref} {...props} />
   }

src/plots/calendar/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Calendar, CalendarConfig, Base as BasePlot } from '@antv/g2plot'
+import { Calendar, CalendarConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type CalendarChartProps = Omit<BaseChartProps<CalendarConfig>, 'chart'> &
   CalendarConfig
 
-const CalendarChart = forwardRef<BasePlot<CalendarConfig>, CalendarChartProps>(
+const CalendarChart = forwardRef<HTMLDivElement | null, CalendarChartProps>(
   (props, ref) => {
     return <BaseChart chart={Calendar} ref={ref} {...props} />
   }

src/plots/column-line/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { ColumnLine, ColumnLineConfig, Base as BasePlot } from '@antv/g2plot'
+import { ColumnLine, ColumnLineConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type ColumnLineChartProps = Omit<
@@ -8,11 +8,10 @@ export type ColumnLineChartProps = Omit<
 > &
   ColumnLineConfig
 
-const ColumnLineChart = forwardRef<
-  BasePlot<ColumnLineConfig>,
-  ColumnLineChartProps
->((props, ref) => {
-  return <BaseChart chart={ColumnLine} ref={ref} {...props} />
-})
+const ColumnLineChart = forwardRef<HTMLDivElement | null, ColumnLineChartProps>(
+  (props, ref) => {
+    return <BaseChart chart={ColumnLine} ref={ref} {...props} />
+  }
+)
 
 export default ColumnLineChart

src/plots/column/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Column, ColumnConfig, Base as BasePlot } from '@antv/g2plot'
+import { Column, ColumnConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type ColumnChartProps = Omit<BaseChartProps<ColumnConfig>, 'chart'> &
   ColumnConfig
 
-const ColumnChart = forwardRef<BasePlot<ColumnConfig>, ColumnChartProps>(
+const ColumnChart = forwardRef<HTMLDivElement | null, ColumnChartProps>(
   (props, ref) => {
     return <BaseChart chart={Column} ref={ref} {...props} />
   }

src/plots/density-heatmap/index.tsx

@@ -1,9 +1,5 @@
 import React, { forwardRef } from 'react'
-import {
-  DensityHeatmap,
-  DensityHeatmapConfig,
-  Base as BasePlot,
-} from '@antv/g2plot'
+import { DensityHeatmap, DensityHeatmapConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type DensityHeatmapChartProps = Omit<
@@ -13,7 +9,7 @@ export type DensityHeatmapChartProps = Omit<
   DensityHeatmapConfig
 
 const DensityHeatmapChart = forwardRef<
-  BasePlot<DensityHeatmapConfig>,
+  HTMLDivElement | null,
   DensityHeatmapChartProps
 >((props, ref) => {
   return (