chore: upgrade typescript to v4 (#3488)

Author: visiky

.eslintrc

@@ -17,7 +17,10 @@
     "no-self-assign": 0,
     "no-unused-vars": 0, // @typescript-eslint/no-unused-vars
     "no-inner-declarations": 0,
+    "no-undef": 0,
     "prettier/prettier": 2,
+    "import/order": 2,
+    "import/no-default-export": 2,
     "@typescript-eslint/no-unused-vars": 1,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
@@ -30,9 +33,7 @@
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/type-annotation-spacing": 0,
     "@typescript-eslint/no-empty-function": 1,
-    "no-undef": 0,
     "@typescript-eslint/no-var-requires": 0,
-    "import/order": 2,
-    "import/no-default-export": 2
+    "@typescript-eslint/ban-ts-comment": 0
   }
 }

__tests__/unit/core/index-spec.ts

@@ -211,7 +211,7 @@ describe('core', () => {
 
   it('getChartSize', () => {
     createDiv('', document.body, 'changeSize');
-    document.getElementById('changeSize').style.width = '0px';
+    document.getElementById('changeSize')!.style.width = '0px';
     const line = new Line('changeSize', {
       data: partySupport.filter((o) => o.type === 'FF'),
       xField: 'date',
@@ -259,8 +259,8 @@ describe('core', () => {
 
     line.render();
 
-    expect(line.chart.getOptions().axes['date'].label.autoRotate).toBe(false);
-    expect(line.chart.getOptions().axes['date'].label.autoHide).toEqual({
+    expect(line.chart.getOptions().axes?.['date'].label.autoRotate).toBe(false);
+    expect(line.chart.getOptions().axes?.['date'].label.autoHide).toEqual({
       type: 'equidistance',
       cfg: {
         minGap: 6,
@@ -280,8 +280,8 @@ describe('core', () => {
       },
     });
     line.render();
-    expect(line.chart.getOptions().axes['date'].label.autoRotate).toBe(false);
-    expect(line.chart.getOptions().axes['date'].label.autoHide).toEqual({
+    expect(line.chart.getOptions().axes?.['date'].label.autoRotate).toBe(false);
+    expect(line.chart.getOptions().axes?.['date'].label.autoHide).toEqual({
       type: 'equidistance',
       cfg: {
         minGap: 12,
@@ -296,14 +296,14 @@ describe('core', () => {
       },
     });
     line.render();
-    expect(line.chart.getOptions().axes['date'].label.autoRotate).toBe(false);
-    expect(line.chart.getOptions().axes['date'].label.autoHide).toBe(false);
+    expect(line.chart.getOptions().axes?.['date'].label.autoRotate).toBe(false);
+    expect(line.chart.getOptions().axes?.['date'].label.autoHide).toBe(false);
 
     line.destroy();
   });
 
   it('default-options', () => {
-    type CustomPlotOptions = {};
+    type CustomPlotOptions = Record<string, any>;
     class CustomPlot extends Plot<CustomPlotOptions> {
       type: 'custom';
       getSchemaAdaptor() {
@@ -338,7 +338,7 @@ describe('core', () => {
 
     const annotations = line.chart.getController('annotation').getComponents();
     expect(annotations.length).toBe(2);
-    expect(annotations.find((co) => co.extra.id === 'ID').component.get('type')).toBe('image');
+    expect(annotations.find((co) => co.extra.id === 'ID')?.component.get('type')).toBe('image');
 
     line.addAnnotations([{ type: 'image', start: ['min', 'median'], end: ['max', 'median'], src: 'xx' }]);
     expect(line.chart.getController('annotation').getComponents().length).toBe(3);

__tests__/unit/plots/multi-view/multi-plots-spec.ts

@@ -44,10 +44,9 @@ describe('multi-plots in multi-view', () => {
   it('innormal, 带不合法的 plot type', () => {
     plot.update({
       // @ts-ignore `pass illegal type`
-      plots: [
-        ...plot.options.plots,
+      plots: (plot.options.plots || []).concat([
         {
-          type: 'xxx',
+          type: 'xxx' as any,
           options: {
             data: [
               { x: 'x', y: 1 },
@@ -57,7 +56,7 @@ describe('multi-plots in multi-view', () => {
             yField: 'y',
           },
         },
-      ],
+      ]),
     });
 
     expect(plot.chart.views.length).toBe(3);
@@ -129,7 +128,7 @@ describe('multi-plots in multi-view', () => {
         },
       ],
     });
-    const geometries = [];
+    const geometries: any[] = [];
     plot.chart.views.forEach((view) => geometries.push(...view.geometries));
     expect(geometries.length).toBe(2);
   });

__tests__/unit/plots/scatter/regression-line-spec.ts

@@ -114,9 +114,9 @@ describe('scatter', () => {
     const { width } = scatter.chart;
     const pathGroup = scatter.chart
       .getComponents()
-      .find((item) => item.type === 'annotation')
+      .find((item) => item.type === 'annotation')!
       .component.cfg.group.cfg.children[0].getChildren();
-    const { path } = pathGroup?.[0]?.cfg?.attrs;
+    const { path = [] } = pathGroup?.[0]?.cfg?.attrs || {};
     expect(path.length).toBe(3);
     expect(scatter.chart.getXScale().scale(8) * width < path[0][1]).toBeTruthy();
 
@@ -154,9 +154,9 @@ describe('scatter', () => {
     const { width } = scatter.chart;
     const pathGroup = scatter.chart
       .getComponents()
-      .find((item) => item.type === 'annotation')
+      .find((item) => item.type === 'annotation')!
       .component.cfg.group.cfg.children[0].getChildren();
-    const { path } = pathGroup?.[0]?.cfg?.attrs;
+    const { path = [] } = pathGroup?.[0]?.cfg?.attrs || {};
     expect(path.length).toBe(3);
     expect(scatter.chart.getXScale().scale(8) * width < path[0][1]).toBeTruthy();
 
@@ -180,9 +180,9 @@ describe('scatter', () => {
     await delay(100);
     const pathGroup = scatter.chart
       .getComponents()
-      .find((item) => item.type === 'annotation')
+      .find((item) => item.type === 'annotation')!
       .component.cfg.group.cfg.children[0].getChildren();
-    const { path } = pathGroup?.[0]?.cfg?.attrs;
+    const { path = [] } = pathGroup?.[0]?.cfg?.attrs || {};
     expect(path.length).toBe(2); // linear
 
     scatter.destroy();

__tests__/unit/plots/sunburst/treemap-spec.ts

@@ -62,8 +62,8 @@ describe('treemap sunburst', () => {
     const geometry = sunburstPlot.chart.geometries[0];
 
     expect(geometry.type).toBe('polygon');
-    // @ts-ignore
     const {
+      // @ts-ignore
       attributeOption: { color },
       coordinate,
     } = geometry;
@@ -105,8 +105,8 @@ describe('treemap sunburst', () => {
     sunburstPlot.render();
     const geometry = sunburstPlot.chart.geometries[0];
     expect(geometry.type).toBe('polygon');
-    // @ts-ignore
     const {
+      // @ts-ignore
       attributeOption: { color },
       coordinate,
     } = geometry;
@@ -155,8 +155,8 @@ describe('treemap sunburst', () => {
     sunburstPlot.render();
     const geometry = sunburstPlot.chart.geometries[0];
     expect(geometry.type).toBe('polygon');
-    // @ts-ignore
     const {
+      // @ts-ignore
       attributeOption: { color },
       coordinate,
     } = geometry;

package.json

@@ -73,16 +73,16 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-angular": "^8.2.0",
     "@types/jest": "^25.2.1",
-    "@typescript-eslint/eslint-plugin": "^2.0.0",
-    "@typescript-eslint/parser": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "antd": "^4.8.4",
     "babel-loader": "^8.1.0",
     "conventional-changelog-cli": "^2.0.34",
     "cross-env": "^7.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^4.2.0",
     "generate-changelog": "^1.8.0",
     "husky": "^4.2.3",
     "jest": "^26.0.1",
@@ -101,7 +101,7 @@
     "rimraf": "^3.0.0",
     "ts-jest": "^25.4.0",
     "ts-loader": "^7.0.0",
-    "typescript": "^3.5.3",
+    "typescript": "^4",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.7",

src/plots/bidirectional-bar/adaptor.ts

@@ -314,7 +314,7 @@ function label(params: Params<BidirectionalBarOptions>): Params<BidirectionalBar
       if (typeof cfg.position === 'string') {
         cfg.position = positionMap[cfg.position];
       } else if (typeof cfg.position === 'function') {
-        cfg.position = (...args) => positionMap[(cfg.position as Function).apply(this, args)];
+        cfg.position = (...args) => positionMap[(cfg.position as any).apply(this, args)];
       }
       // 设置 textBaseline 默认值
       const textBaseline = leftLabelCfg.style?.textBaseline || 'bottom';

src/plots/sankey/layout.ts

@@ -62,7 +62,7 @@ type SankeyLayoutOutputData = {
 /**
  * 对齐方式的类型定义
  */
-export type NodeAlign = keyof typeof ALIGN_METHOD | Function;
+export type NodeAlign = keyof typeof ALIGN_METHOD | ((...args: any[]) => any);
 
 /**
  * 节点的 depth 自定义

src/utils/hierarchy/partition.ts

@@ -20,7 +20,7 @@ export interface Options {
   round?: boolean;
   ratio?: number;
   padding?: number;
-  sort?: Function;
+  sort?: (a: any, b: any) => any; // Function;
   as?: [string, string];
 
   ignoreParentValue?: boolean;