fix: 修复ts报错

antvis · Jan 26, 2021 · 22f5401 · 22f5401
1 parent 6a0bd08
commit 22f5401
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 11 deletions.
diff --git a/packages/components/src/chart/index.ts b/packages/components/src/chart/index.ts
@@ -1,5 +1,6 @@
 import F2 from '@antv/f2';
 import { batch2hd, map } from '@ali/f2x-util';
+import Component from '../component';
 import ComboComponent from './comboComponent';
 import createComponentTree from './createComponentTree';
 
@@ -17,13 +18,14 @@ interface ChartProps extends ChartUpdateProps {
   context: any,
 }
 
-class Chart {
+class Chart extends Component {
 
   chart: any;
   component: ComboComponent;
   container: any;
 
   constructor(props: ChartProps) {
+    super(props);
     const { context, pixelRatio, width, height, animate, data, children, padding } = props;
     const chart = new F2.Chart({
       context,
@@ -63,6 +65,7 @@ class Chart {
   render() {
     const { chart } = this;
     chart.render();
+    return null;
   }
 
   update(props: ChartUpdateProps) {

diff --git a/packages/components/src/component/index.ts b/packages/components/src/component/index.ts
@@ -2,7 +2,6 @@ class Component {
   chart: any;
   container: any;
   props: any;
-  // state: any;
 
   /**
    * @private
@@ -11,6 +10,13 @@ class Component {
   __props: any;
   // actions: any;
 
+  // TODO for TypeScript
+  state: any;
+  context: any;
+  refs: {
+    [key: string]: any;
+  }
+
   constructor(props: any) {
     this.__props = props;
     this.props = props;
@@ -22,10 +28,16 @@ class Component {
   }
   mount() {
   }
+  // TODO
+  setState() {
+  }
   update(props: any) {
     this.__props = props;
     this.props = props;
   }
+  // TODO
+  forceUpdate() {
+  }
   render(): JSX.Element {
     return null;
   }

diff --git a/packages/fund-components/test/weaverLine.test.tsx b/packages/fund-components/test/weaverLine.test.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { jsx } from '@ali/f2-jsx';
 import Chart from '@ali/f2-components';
 import { WeaverLine } from '../src';
@@ -24,6 +23,7 @@ describe('WeaverLine', () => {
       </Chart>
     );
 
+    // @ts-ignore
     const chart = new type(props);
     chart.render();
   });

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -6,7 +6,7 @@ export interface ChartProps {
   width?: number | string,
   height?: number | string,
   data: any,
-  padding: (string | number)[],
+  padding?: (string | number)[],
   animate?: boolean
 }
 

diff --git a/packages/react/test/chart.test.tsx b/packages/react/test/chart.test.tsx
@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 /* @jsx React.createElement */
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -18,7 +16,8 @@ const data = [
   { genre: 'Other', sold: 150 }
 ];
 
-function App({ chartRef, lineRef, a }) {
+function App(props: any) {
+  const { chartRef, lineRef, a } = props;
   return (
     <ReactChart ref={ chartRef } data={ data } width={ 100 } height={ 100 }>
       <Line ref={ lineRef } position="genre*sold" a={ a } />
@@ -28,8 +27,8 @@ function App({ chartRef, lineRef, a }) {
 
 describe('<Chart >', () => {
   it('Chart render', () => {
-    const chartRef = React.createRef();
-    const lineRef = React.createRef();
+    const chartRef = React.createRef<ReactChart>();
+    const lineRef = React.createRef<any>();
 
     const wrapper = mount(<App chartRef={ chartRef } lineRef={ lineRef } />);
     expect(wrapper.html()).toBe('<canvas class="f2-chart" width="100" height="100" style="width: 100px; height: 100px;"></canvas>');
@@ -42,8 +41,8 @@ describe('<Chart >', () => {
     expect(line.props.a).toBeUndefined();
 
     // 触发update
-    wrapper.setProps({ a: 1 });
-    expect(line.props.a).toBe(1);
+    wrapper.setProps({ a: 2 });
+    expect(line.props.a).toBe(2);
 
     wrapper.unmount();
     // 断言 F2 实例销毁