You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/03/05 03:23:25 UTC

[incubator-echarts] branch typescript updated: ts: add types for boxplot and candlestick

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch typescript
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git


The following commit(s) were added to refs/heads/typescript by this push:
     new 3152a5b  ts: add types for boxplot and candlestick
3152a5b is described below

commit 3152a5be23b883f724965fdded61ab71522032f8
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Mar 5 11:22:53 2020 +0800

    ts: add types for boxplot and candlestick
---
 src/chart/boxplot/BoxplotSeries.ts         |  94 +++++++++++++-----
 src/chart/boxplot/BoxplotView.ts           |  78 ++++++++++-----
 src/chart/boxplot/boxplotLayout.ts         |  62 +++++++-----
 src/chart/boxplot/boxplotVisual.ts         |  10 +-
 src/chart/candlestick/CandlestickSeries.ts | 103 +++++++++++++------
 src/chart/candlestick/CandlestickView.ts   | 153 ++++++++++++++++++-----------
 src/chart/candlestick/candlestickLayout.ts |  70 ++++++++-----
 src/chart/candlestick/candlestickVisual.ts |  77 ++++++++-------
 src/chart/candlestick/preprocessor.ts      |   5 +-
 src/chart/helper/LargeSymbolDraw.ts        |   8 +-
 src/chart/helper/SymbolDraw.ts             |   5 +-
 src/chart/helper/createListSimply.ts       |   4 +-
 src/chart/helper/whiskerBoxCommon.ts       |  59 +++++++----
 src/chart/line/LineView.ts                 |   5 +-
 src/coord/CoordinateSystem.ts              |  12 ++-
 src/coord/polar/Polar.ts                   |   5 +-
 src/model/Series.ts                        |  13 +--
 17 files changed, 485 insertions(+), 278 deletions(-)

diff --git a/src/chart/boxplot/BoxplotSeries.ts b/src/chart/boxplot/BoxplotSeries.ts
index e5aa960..57cd46e 100644
--- a/src/chart/boxplot/BoxplotSeries.ts
+++ b/src/chart/boxplot/BoxplotSeries.ts
@@ -17,18 +17,63 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import SeriesModel from '../../model/Series';
-import {seriesModelMixin} from '../helper/whiskerBoxCommon';
+import {WhiskerBoxCommonMixin} from '../helper/whiskerBoxCommon';
+import {
+    SeriesOption,
+    SeriesOnCartesianOptionMixin,
+    LayoutOrient,
+    ItemStyleOption,
+    LabelOption,
+    OptionDataValueNumeric
+} from '../../util/types';
+import ComponentModel from '../../model/Component';
+import type Axis2D from '../../coord/cartesian/Axis2D';
+import Cartesian2D from '../../coord/cartesian/Cartesian2D';
+
+// [min,  Q1,  median (or Q2),  Q3,  max]
+type BoxplotDataValue = OptionDataValueNumeric[];
+export interface BoxplotDataItemOption {
+    value: BoxplotDataValue
+
+    itemStyle?: ItemStyleOption
+    label?: LabelOption
+
+    emphasis?: {
+        itemStyle: ItemStyleOption
+        label?: LabelOption
+    }
+
+}
+
+export interface BoxplotSeriesOption extends SeriesOption, SeriesOnCartesianOptionMixin {
+    hoverAnimation?: boolean
+    layout?: LayoutOrient
+    /**
+     * [min, max] can be percent of band width.
+     */
+    boxWidth?: (string | number)[]
+
+    itemStyle?: ItemStyleOption
+
+    label?: LabelOption
+
+    emphasis?: {
+        itemStyle: ItemStyleOption
+        label?: LabelOption
+    }
+
+    data?: (BoxplotDataValue | BoxplotDataItemOption)[]
+}
 
-var BoxplotSeries = SeriesModel.extend({
+class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
 
-    type: 'series.boxplot',
+    static readonly type = 'series.boxplot'
 
-    dependencies: ['xAxis', 'yAxis', 'grid'],
+    static readonly dependencies = ['xAxis', 'yAxis', 'grid']
 
+    coordinateSystem: Cartesian2D
     // TODO
     // box width represents group size, so dimension should have 'size'.
 
@@ -38,36 +83,26 @@ var BoxplotSeries = SeriesModel.extend({
      * and echarts do not need to know it.
      * @readOnly
      */
-    defaultValueDimensions: [
+    defaultValueDimensions = [
         {name: 'min', defaultTooltip: true},
         {name: 'Q1', defaultTooltip: true},
         {name: 'median', defaultTooltip: true},
         {name: 'Q3', defaultTooltip: true},
         {name: 'max', defaultTooltip: true}
-    ],
+    ]
 
-    /**
-     * @type {Array.<string>}
-     * @readOnly
-     */
-    dimensions: null,
+    dimensions: string[]
 
-    /**
-     * @override
-     */
-    defaultOption: {
-        zlevel: 0,                  // 一级层叠
-        z: 2,                       // 二级层叠
+    static defaultOption: BoxplotSeriesOption = {
+        zlevel: 0,
+        z: 2,
         coordinateSystem: 'cartesian2d',
         legendHoverLink: true,
 
         hoverAnimation: true,
 
-        // xAxisIndex: 0,
-        // yAxisIndex: 0,
-
-        layout: null,               // 'horizontal' or 'vertical'
-        boxWidth: [7, 50],       // [min, max] can be percent of band width.
+        layout: null,
+        boxWidth: [7, 50],
 
         itemStyle: {
             color: '#fff',
@@ -87,8 +122,13 @@ var BoxplotSeries = SeriesModel.extend({
         animationEasing: 'elasticOut',
         animationDuration: 800
     }
-});
+}
+
+interface BoxplotSeriesModel extends WhiskerBoxCommonMixin<BoxplotSeriesOption> {
+    getBaseAxis(): Axis2D
+}
+zrUtil.mixin(BoxplotSeriesModel, WhiskerBoxCommonMixin, true);
 
-zrUtil.mixin(BoxplotSeries, seriesModelMixin, true);
+ComponentModel.registerClass(BoxplotSeriesModel);
 
-export default BoxplotSeries;
+export default BoxplotSeriesModel;
diff --git a/src/chart/boxplot/BoxplotView.ts b/src/chart/boxplot/BoxplotView.ts
index 50ff929..1905a11 100644
--- a/src/chart/boxplot/BoxplotView.ts
+++ b/src/chart/boxplot/BoxplotView.ts
@@ -17,22 +17,27 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import * as graphic from '../../util/graphic';
-import Path from 'zrender/src/graphic/Path';
+import Path, { PathProps } from 'zrender/src/graphic/Path';
+import BoxplotSeriesModel from './BoxplotSeries';
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import List from '../../data/List';
+import { BoxplotItemLayout } from './boxplotLayout';
+import { StyleProps } from 'zrender/src/graphic/Style';
 
 // Update common properties
-var NORMAL_ITEM_STYLE_PATH = ['itemStyle'];
-var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'];
+var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'] as const;
 
-var BoxplotView = ChartView.extend({
+class BoxplotView extends ChartView {
+    static type = 'boxplot'
+    type = BoxplotView.type
 
-    type: 'boxplot',
+    private _data: List
 
-    render: function (seriesModel, ecModel, api) {
+    render(seriesModel: BoxplotSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         var data = seriesModel.getData();
         var group = this.group;
         var oldData = this._data;
@@ -48,14 +53,14 @@ var BoxplotView = ChartView.extend({
         data.diff(oldData)
             .add(function (newIdx) {
                 if (data.hasValue(newIdx)) {
-                    var itemLayout = data.getItemLayout(newIdx);
+                    var itemLayout = data.getItemLayout(newIdx) as BoxplotItemLayout;
                     var symbolEl = createNormalBox(itemLayout, data, newIdx, constDim, true);
                     data.setItemGraphicEl(newIdx, symbolEl);
                     group.add(symbolEl);
                 }
             })
             .update(function (newIdx, oldIdx) {
-                var symbolEl = oldData.getItemGraphicEl(oldIdx);
+                var symbolEl = oldData.getItemGraphicEl(oldIdx) as BoxPath;
 
                 // Empty data
                 if (!data.hasValue(newIdx)) {
@@ -63,7 +68,7 @@ var BoxplotView = ChartView.extend({
                     return;
                 }
 
-                var itemLayout = data.getItemLayout(newIdx);
+                var itemLayout = data.getItemLayout(newIdx) as BoxplotItemLayout;
                 if (!symbolEl) {
                     symbolEl = createNormalBox(itemLayout, data, newIdx, constDim);
                 }
@@ -82,29 +87,36 @@ var BoxplotView = ChartView.extend({
             .execute();
 
         this._data = data;
-    },
+    }
 
-    remove: function (ecModel) {
+    remove(ecModel: GlobalModel) {
         var group = this.group;
         var data = this._data;
         this._data = null;
         data && data.eachItemGraphicEl(function (el) {
             el && group.remove(el);
         });
-    },
-
-    dispose: zrUtil.noop
+    }
+}
 
-});
+class BoxPathShape {
+    points: number[][]
+}
 
+interface BoxPathProps extends PathProps {
+    shape?: Partial<BoxPathShape>
+}
 
-var BoxPath = Path.extend({
+class BoxPath extends Path<BoxPathProps> {
 
-    type: 'boxplotBoxPath',
+    readonly type = 'boxplotBoxPath'
+    shape: BoxPathShape
 
-    shape: {},
+    constructor(opts?: BoxPathProps) {
+        super(opts, null, new BoxPathShape());
+    }
 
-    buildPath: function (ctx, shape) {
+    buildPath(ctx: CanvasRenderingContext2D, shape: BoxPathShape) {
         var ends = shape.points;
 
         var i = 0;
@@ -121,10 +133,16 @@ var BoxPath = Path.extend({
             ctx.lineTo(ends[i][0], ends[i][1]);
         }
     }
-});
 
+}
 
-function createNormalBox(itemLayout, data, dataIndex, constDim, isInit) {
+function createNormalBox(
+    itemLayout: BoxplotItemLayout,
+    data: List,
+    dataIndex: number,
+    constDim: number,
+    isInit?: boolean
+) {
     var ends = itemLayout.ends;
 
     var el = new BoxPath({
@@ -140,7 +158,13 @@ function createNormalBox(itemLayout, data, dataIndex, constDim, isInit) {
     return el;
 }
 
-function updateNormalBoxData(itemLayout, el, data, dataIndex, isInit) {
+function updateNormalBoxData(
+    itemLayout: BoxplotItemLayout,
+    el: BoxPath,
+    data: List,
+    dataIndex: number,
+    isInit?: boolean
+) {
     var seriesModel = data.hostModel;
     var updateMethod = graphic[isInit ? 'initProps' : 'updateProps'];
 
@@ -152,11 +176,11 @@ function updateNormalBoxData(itemLayout, el, data, dataIndex, isInit) {
     );
 
     var itemModel = data.getItemModel(dataIndex);
-    var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH);
+    var normalItemStyleModel = itemModel.getModel('itemStyle');
     var borderColor = data.getItemVisual(dataIndex, 'color');
 
     // Exclude borderColor.
-    var itemStyle = normalItemStyleModel.getItemStyle(['borderColor']);
+    var itemStyle = normalItemStyleModel.getItemStyle(['borderColor']) as StyleProps;
     itemStyle.stroke = borderColor;
     itemStyle.strokeNoScale = true;
     el.useStyle(itemStyle);
@@ -167,7 +191,7 @@ function updateNormalBoxData(itemLayout, el, data, dataIndex, isInit) {
     graphic.setHoverStyle(el, hoverStyle);
 }
 
-function transInit(points, dim, itemLayout) {
+function transInit(points: number[][], dim: number, itemLayout: BoxplotItemLayout) {
     return zrUtil.map(points, function (point) {
         point = point.slice();
         point[dim] = itemLayout.initBaseline;
diff --git a/src/chart/boxplot/boxplotLayout.ts b/src/chart/boxplot/boxplotLayout.ts
index 6d66e1b..59a1235 100644
--- a/src/chart/boxplot/boxplotLayout.ts
+++ b/src/chart/boxplot/boxplotLayout.ts
@@ -17,14 +17,27 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import {parsePercent} from '../../util/number';
+import type GlobalModel from '../../model/Global';
+import BoxplotSeriesModel from './BoxplotSeries';
+import Axis2D from '../../coord/cartesian/Axis2D';
 
 var each = zrUtil.each;
 
-export default function (ecModel) {
+interface GroupItem {
+    seriesModels: BoxplotSeriesModel[]
+    axis: Axis2D
+    boxOffsetList: number[]
+    boxWidthList: number[]
+}
+
+export interface BoxplotItemLayout {
+    ends: number[][]
+    initBaseline: number
+}
+
+export default function (ecModel: GlobalModel) {
 
     var groupResult = groupSeriesByAxis(ecModel);
 
@@ -50,18 +63,21 @@ export default function (ecModel) {
 /**
  * Group series by axis.
  */
-function groupSeriesByAxis(ecModel) {
-    var result = [];
-    var axisList = [];
+function groupSeriesByAxis(ecModel: GlobalModel) {
+    var result: GroupItem[] = [];
+    var axisList: Axis2D[] = [];
 
-    ecModel.eachSeriesByType('boxplot', function (seriesModel) {
+    ecModel.eachSeriesByType('boxplot', function (seriesModel: BoxplotSeriesModel) {
         var baseAxis = seriesModel.getBaseAxis();
         var idx = zrUtil.indexOf(axisList, baseAxis);
 
         if (idx < 0) {
             idx = axisList.length;
             axisList[idx] = baseAxis;
-            result[idx] = {axis: baseAxis, seriesModels: []};
+            result[idx] = {
+                axis: baseAxis,
+                seriesModels: []
+            } as GroupItem;
         }
 
         result[idx].seriesModels.push(seriesModel);
@@ -73,17 +89,17 @@ function groupSeriesByAxis(ecModel) {
 /**
  * Calculate offset and box width for each series.
  */
-function calculateBase(groupItem) {
+function calculateBase(groupItem: GroupItem) {
     var extent;
     var baseAxis = groupItem.axis;
     var seriesModels = groupItem.seriesModels;
     var seriesCount = seriesModels.length;
 
-    var boxWidthList = groupItem.boxWidthList = [];
-    var boxOffsetList = groupItem.boxOffsetList = [];
-    var boundList = [];
+    var boxWidthList: number[] = groupItem.boxWidthList = [];
+    var boxOffsetList: number[] = groupItem.boxOffsetList = [];
+    var boundList: number[][] = [];
 
-    var bandWidth;
+    var bandWidth: number;
     if (baseAxis.type === 'category') {
         bandWidth = baseAxis.getBandWidth();
     }
@@ -125,7 +141,7 @@ function calculateBase(groupItem) {
 /**
  * Calculate points location for each series.
  */
-function layoutSingleSeries(seriesModel, offset, boxWidth) {
+function layoutSingleSeries(seriesModel: BoxplotSeriesModel, offset: number, boxWidth: number) {
     var coordSys = seriesModel.coordinateSystem;
     var data = seriesModel.getData();
     var halfWidth = boxWidth / 2;
@@ -140,7 +156,7 @@ function layoutSingleSeries(seriesModel, offset, boxWidth) {
     }
 
     for (var dataIndex = 0; dataIndex < data.count(); dataIndex++) {
-        var axisDimVal = data.get(cDim, dataIndex);
+        var axisDimVal = data.get(cDim, dataIndex) as number;
 
         var median = getPoint(axisDimVal, vDims[2], dataIndex);
         var end1 = getPoint(axisDimVal, vDims[0], dataIndex);
@@ -148,9 +164,9 @@ function layoutSingleSeries(seriesModel, offset, boxWidth) {
         var end4 = getPoint(axisDimVal, vDims[3], dataIndex);
         var end5 = getPoint(axisDimVal, vDims[4], dataIndex);
 
-        var ends = [];
-        addBodyEnd(ends, end2, 0);
-        addBodyEnd(ends, end4, 1);
+        var ends: number[][] = [];
+        addBodyEnd(ends, end2, false);
+        addBodyEnd(ends, end4, true);
 
         ends.push(end1, end2, end5, end4);
         layEndLine(ends, end1);
@@ -160,11 +176,11 @@ function layoutSingleSeries(seriesModel, offset, boxWidth) {
         data.setItemLayout(dataIndex, {
             initBaseline: median[vDimIdx],
             ends: ends
-        });
+        } as BoxplotItemLayout);
     }
 
-    function getPoint(axisDimVal, dimIdx, dataIndex) {
-        var val = data.get(dimIdx, dataIndex);
+    function getPoint(axisDimVal: number, dim: string, dataIndex: number) {
+        var val = data.get(dim, dataIndex) as number;
         var p = [];
         p[cDimIdx] = axisDimVal;
         p[vDimIdx] = val;
@@ -179,7 +195,7 @@ function layoutSingleSeries(seriesModel, offset, boxWidth) {
         return point;
     }
 
-    function addBodyEnd(ends, point, start) {
+    function addBodyEnd(ends: number[][], point: number[], start?: boolean) {
         var point1 = point.slice();
         var point2 = point.slice();
         point1[cDimIdx] += halfWidth;
@@ -189,7 +205,7 @@ function layoutSingleSeries(seriesModel, offset, boxWidth) {
             : ends.push(point2, point1);
     }
 
-    function layEndLine(ends, endCenter) {
+    function layEndLine(ends: number[][], endCenter: number[]) {
         var from = endCenter.slice();
         var to = endCenter.slice();
         from[cDimIdx] -= halfWidth;
diff --git a/src/chart/boxplot/boxplotVisual.ts b/src/chart/boxplot/boxplotVisual.ts
index ac6cc50..8443c18 100644
--- a/src/chart/boxplot/boxplotVisual.ts
+++ b/src/chart/boxplot/boxplotVisual.ts
@@ -17,15 +17,17 @@
 * under the License.
 */
 
-// @ts-nocheck
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import BoxplotSeriesModel from './BoxplotSeries';
 
-var borderColorQuery = ['itemStyle', 'borderColor'];
+var borderColorQuery = ['itemStyle', 'borderColor'] as const;
 
-export default function (ecModel, api) {
+export default function (ecModel: GlobalModel, api: ExtensionAPI) {
 
     var globalColors = ecModel.get('color');
 
-    ecModel.eachRawSeriesByType('boxplot', function (seriesModel) {
+    ecModel.eachRawSeriesByType('boxplot', function (seriesModel: BoxplotSeriesModel) {
 
         var defaulColor = globalColors[seriesModel.seriesIndex % globalColors.length];
         var data = seriesModel.getData();
diff --git a/src/chart/candlestick/CandlestickSeries.ts b/src/chart/candlestick/CandlestickSeries.ts
index d9fe6e7..fde8a35 100644
--- a/src/chart/candlestick/CandlestickSeries.ts
+++ b/src/chart/candlestick/CandlestickSeries.ts
@@ -17,38 +17,80 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import SeriesModel from '../../model/Series';
-import {seriesModelMixin} from '../helper/whiskerBoxCommon';
+import {WhiskerBoxCommonMixin} from '../helper/whiskerBoxCommon';
+import {
+    SeriesOption,
+    SeriesOnCartesianOptionMixin,
+    LayoutOrient,
+    ItemStyleOption,
+    ZRColor,
+    ColorString,
+    LabelOption,
+    SeriesLargeOptionMixin,
+    OptionDataValueNumeric
+} from '../../util/types';
+import List from '../../data/List';
+import Cartesian2D from '../../coord/cartesian/Cartesian2D';
+
+type CandlestickDataValue = OptionDataValueNumeric[];
+export interface CandlestickDataItemOption {
+    value: CandlestickDataValue
+
+    itemStyle?: CandlestickItemStyleOption
+    label?: LabelOption
+
+    emphasis?: {
+        itemStyle: CandlestickItemStyleOption
+        label?: LabelOption
+    }
 
-var CandlestickSeries = SeriesModel.extend({
+}
 
-    type: 'series.candlestick',
+interface CandlestickItemStyleOption extends ItemStyleOption {
+    color0?: ZRColor
+    borderColor0?: ColorString
+}
 
-    dependencies: ['xAxis', 'yAxis', 'grid'],
+export interface CandlestickSeriesOption extends SeriesOption, SeriesOnCartesianOptionMixin, SeriesLargeOptionMixin {
+    hoverAnimation?: boolean
+    layout?: LayoutOrient
+    clip?: boolean
 
-    /**
-     * @readOnly
-     */
-    defaultValueDimensions: [
+    barMaxWidth: number | string
+    barMinWidth: number | string
+    barWidth: number | string
+
+    itemStyle?: CandlestickItemStyleOption
+    label?: LabelOption
+
+    emphasis?: {
+        itemStyle?: CandlestickItemStyleOption
+        label?: LabelOption
+    }
+
+    data?: (CandlestickDataValue | CandlestickDataItemOption)[]
+}
+
+class CandlestickSeriesModel extends SeriesModel<CandlestickSeriesOption> {
+
+    static readonly type = 'series.candlestick'
+
+    static readonly dependencies = ['xAxis', 'yAxis', 'grid']
+
+    coordinateSystem: Cartesian2D
+
+    dimensions: string[]
+
+    defaultValueDimensions = [
         {name: 'open', defaultTooltip: true},
         {name: 'close', defaultTooltip: true},
         {name: 'lowest', defaultTooltip: true},
         {name: 'highest', defaultTooltip: true}
-    ],
-
-    /**
-     * @type {Array.<string>}
-     * @readOnly
-     */
-    dimensions: null,
+    ]
 
-    /**
-     * @override
-     */
-    defaultOption: {
+    static defaultOption: CandlestickSeriesOption = {
         zlevel: 0,
         z: 2,
         coordinateSystem: 'cartesian2d',
@@ -90,26 +132,27 @@ var CandlestickSeries = SeriesModel.extend({
         progressiveThreshold: 1e4,
         progressiveChunkMode: 'mod',
 
-        animationUpdate: false,
         animationEasing: 'linear',
         animationDuration: 300
-    },
+    }
 
     /**
      * Get dimension for shadow in dataZoom
-     * @return {string} dimension name
+     * @return dimension name
      */
-    getShadowDim: function () {
+    getShadowDim() {
         return 'open';
-    },
+    }
 
-    brushSelector: function (dataIndex, data, selectors) {
+    // @ts-ignore
+    brushSelector(dataIndex: number, data: List, selectors) {
         var itemLayout = data.getItemLayout(dataIndex);
         return itemLayout && selectors.rect(itemLayout.brushRect);
     }
+}
 
-});
+zrUtil.mixin(CandlestickSeriesModel, WhiskerBoxCommonMixin, true);
 
-zrUtil.mixin(CandlestickSeries, seriesModelMixin, true);
+SeriesModel.registerClass(CandlestickSeriesModel);
 
-export default CandlestickSeries;
+export default CandlestickSeriesModel;
diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts
index 7c6292a..ca60214 100644
--- a/src/chart/candlestick/CandlestickView.ts
+++ b/src/chart/candlestick/CandlestickView.ts
@@ -17,23 +17,33 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import * as graphic from '../../util/graphic';
-import Path from 'zrender/src/graphic/Path';
+import Path, { PathProps } from 'zrender/src/graphic/Path';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
+import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries';
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import { StageHandlerProgressParams } from '../../util/types';
+import List from '../../data/List';
+import {CandlestickItemLayout} from './candlestickLayout';
+import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
+import Model from '../../model/Model';
+
+var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'] as const;
+var SKIP_PROPS = ['color', 'borderColor'] as const;
 
-var NORMAL_ITEM_STYLE_PATH = ['itemStyle'];
-var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'];
-var SKIP_PROPS = ['color', 'color0', 'borderColor', 'borderColor0'];
+class CandlestickView extends ChartView {
 
-var CandlestickView = ChartView.extend({
+    static readonly type = 'candlestick'
+    readonly type = CandlestickView.type
 
-    type: 'candlestick',
+    private _isLargeDraw: boolean
 
-    render: function (seriesModel, ecModel, api) {
+    private _data: List
+
+    render(seriesModel: CandlestickSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         // If there is clipPath created in large mode. Remove it.
         this.group.removeClipPath();
 
@@ -42,28 +52,33 @@ var CandlestickView = ChartView.extend({
         this._isLargeDraw
             ? this._renderLarge(seriesModel)
             : this._renderNormal(seriesModel);
-    },
+    }
 
-    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+    incrementalPrepareRender(seriesModel: CandlestickSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this._clear();
         this._updateDrawMode(seriesModel);
-    },
+    }
 
-    incrementalRender: function (params, seriesModel, ecModel, api) {
+    incrementalRender(
+        params: StageHandlerProgressParams,
+        seriesModel: CandlestickSeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI
+    ) {
         this._isLargeDraw
              ? this._incrementalRenderLarge(params, seriesModel)
              : this._incrementalRenderNormal(params, seriesModel);
-    },
+    }
 
-    _updateDrawMode: function (seriesModel) {
+    _updateDrawMode(seriesModel: CandlestickSeriesModel) {
         var isLargeDraw = seriesModel.pipelineContext.large;
-        if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
+        if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
             this._isLargeDraw = isLargeDraw;
             this._clear();
         }
-    },
+    }
 
-    _renderNormal: function (seriesModel) {
+    _renderNormal(seriesModel: CandlestickSeriesModel) {
         var data = seriesModel.getData();
         var oldData = this._data;
         var group = this.group;
@@ -84,7 +99,7 @@ var CandlestickView = ChartView.extend({
                 if (data.hasValue(newIdx)) {
                     var el;
 
-                    var itemLayout = data.getItemLayout(newIdx);
+                    var itemLayout = data.getItemLayout(newIdx) as CandlestickItemLayout;
 
                     if (needsClip && isNormalBoxClipped(clipArea, itemLayout)) {
                         return;
@@ -101,7 +116,7 @@ var CandlestickView = ChartView.extend({
                 }
             })
             .update(function (newIdx, oldIdx) {
-                var el = oldData.getItemGraphicEl(oldIdx);
+                var el = oldData.getItemGraphicEl(oldIdx) as NormalBoxPath;
 
                 // Empty data
                 if (!data.hasValue(newIdx)) {
@@ -109,7 +124,7 @@ var CandlestickView = ChartView.extend({
                     return;
                 }
 
-                var itemLayout = data.getItemLayout(newIdx);
+                var itemLayout = data.getItemLayout(newIdx) as CandlestickItemLayout;
                 if (needsClip && isNormalBoxClipped(clipArea, itemLayout)) {
                     group.remove(el);
                     return;
@@ -119,7 +134,11 @@ var CandlestickView = ChartView.extend({
                     el = createNormalBox(itemLayout, newIdx);
                 }
                 else {
-                    graphic.updateProps(el, {shape: {points: itemLayout.ends}}, seriesModel, newIdx);
+                    graphic.updateProps(el, {
+                        shape: {
+                            points: itemLayout.ends
+                        }
+                    }, seriesModel, newIdx);
                 }
 
                 setBoxCommon(el, data, newIdx, isSimpleBox);
@@ -134,9 +153,9 @@ var CandlestickView = ChartView.extend({
             .execute();
 
         this._data = data;
-    },
+    }
 
-    _renderLarge: function (seriesModel) {
+    _renderLarge(seriesModel: CandlestickSeriesModel) {
         this._clear();
 
         createLarge(seriesModel, this.group);
@@ -151,9 +170,9 @@ var CandlestickView = ChartView.extend({
             this.group.removeClipPath();
         }
 
-    },
+    }
 
-    _incrementalRenderNormal: function (params, seriesModel) {
+    _incrementalRenderNormal(params: StageHandlerProgressParams, seriesModel: CandlestickSeriesModel) {
         var data = seriesModel.getData();
         var isSimpleBox = data.getLayout('isSimpleBox');
 
@@ -161,40 +180,50 @@ var CandlestickView = ChartView.extend({
         while ((dataIndex = params.next()) != null) {
             var el;
 
-            var itemLayout = data.getItemLayout(dataIndex);
+            var itemLayout = data.getItemLayout(dataIndex) as CandlestickItemLayout;
             el = createNormalBox(itemLayout, dataIndex);
             setBoxCommon(el, data, dataIndex, isSimpleBox);
 
             el.incremental = true;
             this.group.add(el);
         }
-    },
+    }
 
-    _incrementalRenderLarge: function (params, seriesModel) {
+    _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: CandlestickSeriesModel) {
         createLarge(seriesModel, this.group, true);
-    },
+    }
 
-    remove: function (ecModel) {
+    remove(ecModel: GlobalModel) {
         this._clear();
-    },
+    }
 
-    _clear: function () {
+    _clear() {
         this.group.removeAll();
         this._data = null;
-    },
+    }
+}
 
-    dispose: zrUtil.noop
+class NormalBoxPathShape {
+    points: number[][]
+}
 
-});
+interface NormalBoxPathProps extends PathProps {
+    shape?: Partial<NormalBoxPathShape>
+}
 
+class NormalBoxPath extends Path<NormalBoxPathProps> {
 
-var NormalBoxPath = Path.extend({
+    readonly type = 'normalCandlestickBox'
 
-    type: 'normalCandlestickBox',
+    shape: NormalBoxPathShape
 
-    shape: {},
+    __simpleBox: boolean
 
-    buildPath: function (ctx, shape) {
+    constructor(opts?: NormalBoxPathProps) {
+        super(opts, null, new NormalBoxPathShape());
+    }
+
+    buildPath(ctx: CanvasRenderingContext2D, shape: NormalBoxPathShape) {
         var ends = shape.points;
 
         if (this.__simpleBox) {
@@ -214,10 +243,10 @@ var NormalBoxPath = Path.extend({
             ctx.lineTo(ends[7][0], ends[7][1]);
         }
     }
-});
+}
 
 
-function createNormalBox(itemLayout, dataIndex, isInit) {
+function createNormalBox(itemLayout: CandlestickItemLayout, dataIndex: number, isInit?: boolean) {
     var ends = itemLayout.ends;
     return new NormalBoxPath({
         shape: {
@@ -229,7 +258,7 @@ function createNormalBox(itemLayout, dataIndex, isInit) {
     });
 }
 
-function isNormalBoxClipped(clipArea, itemLayout) {
+function isNormalBoxClipped(clipArea: CoordinateSystemClipArea, itemLayout: CandlestickItemLayout) {
     var clipped = true;
     for (var i = 0; i < itemLayout.ends.length; i++) {
         // If any point are in the region.
@@ -241,9 +270,9 @@ function isNormalBoxClipped(clipArea, itemLayout) {
     return clipped;
 }
 
-function setBoxCommon(el, data, dataIndex, isSimpleBox) {
-    var itemModel = data.getItemModel(dataIndex);
-    var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH);
+function setBoxCommon(el: NormalBoxPath, data: List, dataIndex: number, isSimpleBox?: boolean) {
+    var itemModel = data.getItemModel(dataIndex) as Model<CandlestickDataItemOption>;
+    var normalItemStyleModel = itemModel.getModel('itemStyle');
     var color = data.getItemVisual(dataIndex, 'color');
     var borderColor = data.getItemVisual(dataIndex, 'borderColor') || color;
 
@@ -262,7 +291,7 @@ function setBoxCommon(el, data, dataIndex, isSimpleBox) {
     graphic.setHoverStyle(el, hoverStyle);
 }
 
-function transInit(points, itemLayout) {
+function transInit(points: number[][], itemLayout: CandlestickItemLayout) {
     return zrUtil.map(points, function (point) {
         point = point.slice();
         point[1] = itemLayout.initBaseline;
@@ -272,13 +301,27 @@ function transInit(points, itemLayout) {
 
 
 
-var LargeBoxPath = Path.extend({
+class LargeBoxPathShape {
+    points: ArrayLike<number>
+}
 
-    type: 'largeCandlestickBox',
+interface LargeBoxPathProps extends PathProps {
+    shape?: Partial<LargeBoxPathShape>
+    __sign?: number
+}
+
+class LargeBoxPath extends Path {
+    readonly type = 'largeCandlestickBox'
+
+    shape: LargeBoxPathShape
 
-    shape: {},
+    __sign: number
 
-    buildPath: function (ctx, shape) {
+    constructor(opts?: LargeBoxPathProps) {
+        super(opts, null, new LargeBoxPathShape());
+    }
+
+    buildPath(ctx: CanvasRenderingContext2D, shape: LargeBoxPathShape) {
         // Drawing lines is more efficient than drawing
         // a whole line or drawing rects.
         var points = shape.points;
@@ -293,9 +336,9 @@ var LargeBoxPath = Path.extend({
             }
         }
     }
-});
+}
 
-function createLarge(seriesModel, group, incremental) {
+function createLarge(seriesModel: CandlestickSeriesModel, group: graphic.Group, incremental?: boolean) {
     var data = seriesModel.getData();
     var largePoints = data.getLayout('largePoints');
 
@@ -319,14 +362,14 @@ function createLarge(seriesModel, group, incremental) {
     }
 }
 
-function setLargeStyle(sign, el, seriesModel, data) {
+function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: List) {
     var suffix = sign > 0 ? 'P' : 'N';
     var borderColor = data.getVisual('borderColor' + suffix)
         || data.getVisual('color' + suffix);
 
     // Color must be excluded.
     // Because symbol provide setColor individually to set fill and stroke
-    var itemStyle = seriesModel.getModel(NORMAL_ITEM_STYLE_PATH).getItemStyle(SKIP_PROPS);
+    var itemStyle = seriesModel.getModel('itemStyle').getItemStyle(SKIP_PROPS);
 
     el.useStyle(itemStyle);
     el.style.fill = null;
diff --git a/src/chart/candlestick/candlestickLayout.ts b/src/chart/candlestick/candlestickLayout.ts
index 43a84f6..ae4d758 100644
--- a/src/chart/candlestick/candlestickLayout.ts
+++ b/src/chart/candlestick/candlestickLayout.ts
@@ -17,24 +17,38 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 /* global Float32Array */
 
 import {subPixelOptimize} from '../../util/graphic';
 import createRenderPlanner from '../helper/createRenderPlanner';
 import {parsePercent} from '../../util/number';
 import {retrieve2} from 'zrender/src/core/util';
+import { StageHandler, StageHandlerProgressParams } from '../../util/types';
+import CandlestickSeriesModel from './CandlestickSeries';
+import List from '../../data/List';
+import { RectLike } from 'zrender/src/core/BoundingRect';
 
 var LargeArr = typeof Float32Array !== 'undefined' ? Float32Array : Array;
 
-export default {
+export interface CandlestickItemLayout {
+    sign: number
+    initBaseline: number
+    ends: number[][]
+    brushRect: RectLike
+}
+
+export interface CandlestickLayoutMeta {
+    candleWidth: number
+    isSimpleBox: boolean
+}
+
+const candlestickLayout: StageHandler = {
 
     seriesType: 'candlestick',
 
     plan: createRenderPlanner(),
 
-    reset: function (seriesModel) {
+    reset: function (seriesModel: CandlestickSeriesModel) {
 
         var coordSys = seriesModel.coordinateSystem;
         var data = seriesModel.getData();
@@ -53,7 +67,7 @@ export default {
             candleWidth: candleWidth,
             // The value is experimented visually.
             isSimpleBox: candleWidth <= 1.3
-        });
+        } as CandlestickLayoutMeta);
 
         if (cDim == null || vDims.length < 4) {
             return;
@@ -64,15 +78,15 @@ export default {
                 ? largeProgress : normalProgress
         };
 
-        function normalProgress(params, data) {
+        function normalProgress(params: StageHandlerProgressParams, data: List) {
             var dataIndex;
             while ((dataIndex = params.next()) != null) {
 
-                var axisDimVal = data.get(cDim, dataIndex);
-                var openVal = data.get(openDim, dataIndex);
-                var closeVal = data.get(closeDim, dataIndex);
-                var lowestVal = data.get(lowestDim, dataIndex);
-                var highestVal = data.get(highestDim, dataIndex);
+                var axisDimVal = data.get(cDim, dataIndex) as number;
+                var openVal = data.get(openDim, dataIndex) as number;
+                var closeVal = data.get(closeDim, dataIndex) as number;
+                var lowestVal = data.get(lowestDim, dataIndex) as number;
+                var highestVal = data.get(highestDim, dataIndex) as number;
 
                 var ocLow = Math.min(openVal, closeVal);
                 var ocHigh = Math.max(openVal, closeVal);
@@ -82,7 +96,7 @@ export default {
                 var lowestPoint = getPoint(lowestVal, axisDimVal);
                 var highestPoint = getPoint(highestVal, axisDimVal);
 
-                var ends = [];
+                var ends: number[][] = [];
                 addBodyEnd(ends, ocHighPoint, 0);
                 addBodyEnd(ends, ocLowPoint, 1);
 
@@ -99,10 +113,10 @@ export default {
                         ? ocHighPoint[vDimIdx] : ocLowPoint[vDimIdx], // open point.
                     ends: ends,
                     brushRect: makeBrushRect(lowestVal, highestVal, axisDimVal)
-                });
+                } as CandlestickItemLayout);
             }
 
-            function getPoint(val, axisDimVal) {
+            function getPoint(val: number, axisDimVal: number) {
                 var p = [];
                 p[cDimIdx] = axisDimVal;
                 p[vDimIdx] = val;
@@ -111,7 +125,7 @@ export default {
                     : coordSys.dataToPoint(p);
             }
 
-            function addBodyEnd(ends, point, start) {
+            function addBodyEnd(ends: number[][], point: number[], start: number) {
                 var point1 = point.slice();
                 var point2 = point.slice();
 
@@ -127,7 +141,7 @@ export default {
                     : ends.push(point2, point1);
             }
 
-            function makeBrushRect(lowestVal, highestVal, axisDimVal) {
+            function makeBrushRect(lowestVal: number, highestVal: number, axisDimVal: number) {
                 var pmin = getPoint(lowestVal, axisDimVal);
                 var pmax = getPoint(highestVal, axisDimVal);
 
@@ -142,27 +156,27 @@ export default {
                 };
             }
 
-            function subPixelOptimizePoint(point) {
+            function subPixelOptimizePoint(point: number[]) {
                 point[cDimIdx] = subPixelOptimize(point[cDimIdx], 1);
                 return point;
             }
         }
 
-        function largeProgress(params, data) {
+        function largeProgress(params: StageHandlerProgressParams, data: List) {
             // Structure: [sign, x, yhigh, ylow, sign, x, yhigh, ylow, ...]
             var points = new LargeArr(params.count * 4);
             var offset = 0;
             var point;
-            var tmpIn = [];
-            var tmpOut = [];
+            var tmpIn: number[] = [];
+            var tmpOut: number[] = [];
             var dataIndex;
 
             while ((dataIndex = params.next()) != null) {
-                var axisDimVal = data.get(cDim, dataIndex);
-                var openVal = data.get(openDim, dataIndex);
-                var closeVal = data.get(closeDim, dataIndex);
-                var lowestVal = data.get(lowestDim, dataIndex);
-                var highestVal = data.get(highestDim, dataIndex);
+                var axisDimVal = data.get(cDim, dataIndex) as number;
+                var openVal = data.get(openDim, dataIndex) as number;
+                var closeVal = data.get(closeDim, dataIndex) as number;
+                var lowestVal = data.get(lowestDim, dataIndex) as number;
+                var highestVal = data.get(highestDim, dataIndex) as number;
 
                 if (isNaN(axisDimVal) || isNaN(lowestVal) || isNaN(highestVal)) {
                     points[offset++] = NaN;
@@ -188,7 +202,7 @@ export default {
     }
 };
 
-function getSign(data, dataIndex, openVal, closeVal, closeDim) {
+function getSign(data: List, dataIndex: number, openVal: number, closeVal: number, closeDim: string) {
     var sign;
     if (openVal > closeVal) {
         sign = -1;
@@ -207,7 +221,7 @@ function getSign(data, dataIndex, openVal, closeVal, closeDim) {
     return sign;
 }
 
-function calculateCandleWidth(seriesModel, data) {
+function calculateCandleWidth(seriesModel: CandlestickSeriesModel, data: List) {
     var baseAxis = seriesModel.getBaseAxis();
     var extent;
 
@@ -233,3 +247,5 @@ function calculateCandleWidth(seriesModel, data) {
         // Put max outer to ensure bar visible in spite of overlap.
         : Math.max(Math.min(bandWidth / 2, barMaxWidth), barMinWidth);
 }
+
+export default candlestickLayout;
diff --git a/src/chart/candlestick/candlestickVisual.ts b/src/chart/candlestick/candlestickVisual.ts
index eb33351..d9696c0 100644
--- a/src/chart/candlestick/candlestickVisual.ts
+++ b/src/chart/candlestick/candlestickVisual.ts
@@ -17,16 +17,17 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import createRenderPlanner from '../helper/createRenderPlanner';
+import { StageHandler } from '../../util/types';
+import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries';
+import Model from '../../model/Model';
 
-var positiveBorderColorQuery = ['itemStyle', 'borderColor'];
-var negativeBorderColorQuery = ['itemStyle', 'borderColor0'];
-var positiveColorQuery = ['itemStyle', 'color'];
-var negativeColorQuery = ['itemStyle', 'color0'];
+var positiveBorderColorQuery = ['itemStyle', 'borderColor'] as const;
+var negativeBorderColorQuery = ['itemStyle', 'borderColor0'] as const;
+var positiveColorQuery = ['itemStyle', 'color'] as const;
+var negativeColorQuery = ['itemStyle', 'color0'] as const;
 
-export default {
+const candlestickVisual: StageHandler = {
 
     seriesType: 'candlestick',
 
@@ -35,7 +36,19 @@ export default {
     // For legend.
     performRawSeries: true,
 
-    reset: function (seriesModel, ecModel) {
+    reset: function (seriesModel: CandlestickSeriesModel, ecModel) {
+
+        function getColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
+            return model.get(
+                sign > 0 ? positiveColorQuery : negativeColorQuery
+            );
+        }
+
+        function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
+            return model.get(
+                sign > 0 ? positiveBorderColorQuery : negativeBorderColorQuery
+            );
+        }
 
         var data = seriesModel.getData();
 
@@ -53,37 +66,27 @@ export default {
         }
 
         var isLargeRender = seriesModel.pipelineContext.large;
-        return !isLargeRender && {progress: progress};
-
-
-        function progress(params, data) {
-            var dataIndex;
-            while ((dataIndex = params.next()) != null) {
-                var itemModel = data.getItemModel(dataIndex);
-                var sign = data.getItemLayout(dataIndex).sign;
-
-                data.setItemVisual(
-                    dataIndex,
-                    {
-                        color: getColor(sign, itemModel),
-                        borderColor: getBorderColor(sign, itemModel)
-                    }
-                );
+        return !isLargeRender && {
+            progress(params, data) {
+                var dataIndex;
+                while ((dataIndex = params.next()) != null) {
+                    var itemModel = data.getItemModel(dataIndex);
+                    var sign = data.getItemLayout(dataIndex).sign;
+
+                    data.setItemVisual(
+                        dataIndex,
+                        {
+                            color: getColor(sign, itemModel),
+                            borderColor: getBorderColor(sign, itemModel)
+                        }
+                    );
+                }
             }
-        }
+        };
 
-        function getColor(sign, model) {
-            return model.get(
-                sign > 0 ? positiveColorQuery : negativeColorQuery
-            );
-        }
-
-        function getBorderColor(sign, model) {
-            return model.get(
-                sign > 0 ? positiveBorderColorQuery : negativeBorderColorQuery
-            );
-        }
 
     }
 
-};
\ No newline at end of file
+};
+
+export default candlestickVisual;
\ No newline at end of file
diff --git a/src/chart/candlestick/preprocessor.ts b/src/chart/candlestick/preprocessor.ts
index 142270c..953d3b2 100644
--- a/src/chart/candlestick/preprocessor.ts
+++ b/src/chart/candlestick/preprocessor.ts
@@ -17,11 +17,10 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
+import { ECUnitOption } from '../../util/types';
 
-export default function (option) {
+export default function (option: ECUnitOption) {
     if (!option || !zrUtil.isArray(option.series)) {
         return;
     }
diff --git a/src/chart/helper/LargeSymbolDraw.ts b/src/chart/helper/LargeSymbolDraw.ts
index f6b5d71..f48034f 100644
--- a/src/chart/helper/LargeSymbolDraw.ts
+++ b/src/chart/helper/LargeSymbolDraw.ts
@@ -29,12 +29,10 @@ import { PathProps } from 'zrender/src/graphic/Path';
 import PathProxy from 'zrender/src/core/PathProxy';
 import SeriesModel from '../../model/Series';
 import { StageHandlerProgressParams } from '../../util/types';
+import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
 
 var BOOST_SIZE_THRESHOLD = 4;
 
-interface ClipShape {
-    contain(x: number, y: number): boolean
-}
 class LargeSymbolPathShape {
     points: ArrayLike<number>
     size: number[]
@@ -54,7 +52,7 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
 
     symbolProxy: ECSymbol
 
-    softClipShape: ClipShape
+    softClipShape: CoordinateSystemClipArea
 
     startIndex: number
     endIndex: number
@@ -162,7 +160,7 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
 }
 
 interface UpdateOpt {
-    clipShape?: ClipShape
+    clipShape?: CoordinateSystemClipArea
 }
 
 class LargeSymbolDraw {
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 84aa0a2..4eccd20 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -23,12 +23,11 @@ import { isObject } from 'zrender/src/core/util';
 import List from '../../data/List';
 import type Displayable from 'zrender/src/graphic/Displayable';
 import { StageHandlerProgressParams } from '../../util/types';
+import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
 
 interface UpdateOpt {
     isIgnore?(idx: number): boolean
-    clipShape?: {
-        contain(x: number, y: number): boolean
-    }
+    clipShape?: CoordinateSystemClipArea
 }
 
 interface SymbolLike extends graphic.Group {
diff --git a/src/chart/helper/createListSimply.ts b/src/chart/helper/createListSimply.ts
index 92c6612..e934396 100644
--- a/src/chart/helper/createListSimply.ts
+++ b/src/chart/helper/createListSimply.ts
@@ -17,8 +17,6 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import createDimensions, {CreateDimensionsParams} from '../../data/helper/createDimensions';
 import List from '../../data/List';
 import {extend, isArray} from 'zrender/src/core/util';
@@ -43,7 +41,7 @@ export default function (
 
     var source = seriesModel.getSource();
 
-    var dimensionsInfo = createDimensions(source, opt);
+    var dimensionsInfo = createDimensions(source, opt as CreateDimensionsParams);
 
     var list = new List(dimensionsInfo, seriesModel);
     list.initData(source, nameList);
diff --git a/src/chart/helper/whiskerBoxCommon.ts b/src/chart/helper/whiskerBoxCommon.ts
index 8997928..de23066 100644
--- a/src/chart/helper/whiskerBoxCommon.ts
+++ b/src/chart/helper/whiskerBoxCommon.ts
@@ -17,33 +17,53 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
 import {getDimensionTypeByAxis} from '../../data/helper/dimensionHelper';
 import {makeSeriesEncodeForAxisCoordSys} from '../../data/helper/sourceHelper';
+import type { SeriesOption, SeriesOnCartesianOptionMixin, LayoutOrient } from '../../util/types';
+import type GlobalModel from '../../model/Global';
+import type SeriesModel from '../../model/Series';
+import type CartesianAxisModel from '../../coord/cartesian/AxisModel';
+import type DataDimensionInfo from '../../data/DataDimensionInfo';
+import type List from '../../data/List';
+import type Axis2D from '../../coord/cartesian/Axis2D';
+
+interface CommonOption extends SeriesOption, SeriesOnCartesianOptionMixin {
+    layout?: LayoutOrient
+
+    // data?: (DataItemOption | number[])[]
+}
+
+type WhiskerBoxCommonData = (DataItemOption | number[])[]
 
-export var seriesModelMixin = {
+interface DataItemOption {
+    value?: number[]
+}
+
+interface WhiskerBoxCommonMixin<Opts extends CommonOption> extends SeriesModel<Opts>{}
+class WhiskerBoxCommonMixin<Opts extends CommonOption> {
 
     /**
      * @private
      * @type {string}
      */
-    _baseAxisDim: null,
+    _baseAxisDim: string
+
+    defaultValueDimensions: Partial<DataDimensionInfo>[]
 
     /**
      * @override
      */
-    getInitialData: function (option, ecModel) {
+    getInitialData(option: Opts, ecModel: GlobalModel): List {
         // When both types of xAxis and yAxis are 'value', layout is
         // needed to be specified by user. Otherwise, layout can be
         // judged by which axis is category.
 
         var ordinalMeta;
 
-        var xAxisModel = ecModel.getComponent('xAxis', this.get('xAxisIndex'));
-        var yAxisModel = ecModel.getComponent('yAxis', this.get('yAxisIndex'));
+        var xAxisModel = ecModel.getComponent('xAxis', this.get('xAxisIndex')) as CartesianAxisModel;
+        var yAxisModel = ecModel.getComponent('yAxis', this.get('yAxisIndex')) as CartesianAxisModel;
         var xAxisType = xAxisModel.get('type');
         var yAxisType = yAxisModel.get('type');
         var addOrdinal;
@@ -72,22 +92,22 @@ export var seriesModelMixin = {
         var axisModels = [xAxisModel, yAxisModel];
         var baseAxisType = axisModels[baseAxisDimIndex].get('type');
         var otherAxisType = axisModels[1 - baseAxisDimIndex].get('type');
-        var data = option.data;
+        var data = option.data as WhiskerBoxCommonData;
 
         // ??? FIXME make a stage to perform data transfrom.
         // MUST create a new data, consider setOption({}) again.
         if (data && addOrdinal) {
-            var newOptionData = [];
+            var newOptionData: WhiskerBoxCommonData = [];
             zrUtil.each(data, function (item, index) {
                 var newItem;
-                if (item.value && zrUtil.isArray(item.value)) {
-                    newItem = item.value.slice();
-                    item.value.unshift(index);
-                }
-                else if (zrUtil.isArray(item)) {
+                if (zrUtil.isArray(item)) {
                     newItem = item.slice();
                     item.unshift(index);
                 }
+                else if (zrUtil.isArray(item.value)) {
+                    newItem = item.value.slice();
+                    item.value.unshift(index);
+                }
                 else {
                     newItem = item;
                 }
@@ -122,15 +142,20 @@ export var seriesModelMixin = {
                 )
             }
         );
-    },
+    }
 
     /**
      * If horizontal, base axis is x, otherwise y.
      * @override
      */
-    getBaseAxis: function () {
+    getBaseAxis(): Axis2D {
         var dim = this._baseAxisDim;
-        return this.ecModel.getComponent(dim + 'Axis', this.get(dim + 'AxisIndex')).axis;
+        return (this.ecModel.getComponent(
+            dim + 'Axis', this.get(dim + 'AxisIndex' as 'xAxisIndex' | 'yAxisIndex')
+        ) as CartesianAxisModel).axis;
     }
 
 };
+
+
+export {WhiskerBoxCommonMixin};
\ No newline at end of file
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 2e2b8c0..3c511e0 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -41,6 +41,7 @@ import type { VisualMeta } from '../../component/visualMap/VisualMapModel';
 import type { Payload, Dictionary, ColorString } from '../../util/types';
 import type OrdinalScale from '../../scale/Ordinal';
 import type Axis2D from '../../coord/cartesian/Axis2D';
+import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
 
 
 type PolarArea = ReturnType<Polar['getArea']>
@@ -348,9 +349,7 @@ class LineView extends ChartView {
     _step: LineSeriesOption['step']
     _valueOrigin: LineSeriesOption['areaStyle']['origin']
 
-    _clipShapeForSymbol: {
-        contain(x: number, y: number): boolean
-    }
+    _clipShapeForSymbol: CoordinateSystemClipArea
 
     _data: List
 
diff --git a/src/coord/CoordinateSystem.ts b/src/coord/CoordinateSystem.ts
index 86763d9..1c1360e 100644
--- a/src/coord/CoordinateSystem.ts
+++ b/src/coord/CoordinateSystem.ts
@@ -135,9 +135,7 @@ export interface CoordinateSystem {
 
     getRoamTransform?: () => MatrixArray;
 
-    getArea?: () => {
-        contain(x: number, y: number): boolean
-    };
+    getArea?: () => CoordinateSystemClipArea
 
     // Only `coord/View.js` implements `getBoundingRect`.
     // But if other coord sys implement it, should follow this signature.
@@ -155,3 +153,11 @@ export interface CoordinateSystem {
 export interface CoordinateSystemHostModel extends ComponentModel {
     coordinateSystem?: CoordinateSystemMaster
 }
+
+/**
+ * Clip area will be returned by getArea of CoordinateSystem.
+ * It is used to clip the graphic elements with the contain methods.
+ */
+export interface CoordinateSystemClipArea {
+    contain(x: number, y: number): boolean
+}
diff --git a/src/coord/polar/Polar.ts b/src/coord/polar/Polar.ts
index ec76586..e6e40ea 100644
--- a/src/coord/polar/Polar.ts
+++ b/src/coord/polar/Polar.ts
@@ -20,7 +20,7 @@
 import RadiusAxis from './RadiusAxis';
 import AngleAxis from './AngleAxis';
 import PolarModel from './PolarModel';
-import { CoordinateSystem, CoordinateSystemMaster } from '../CoordinateSystem';
+import { CoordinateSystem, CoordinateSystemMaster, CoordinateSystemClipArea } from '../CoordinateSystem';
 import GlobalModel from '../../model/Global';
 import { ParsedModelFinder } from '../../util/model';
 import { ScaleDataValue } from '../../util/types';
@@ -253,7 +253,7 @@ function getCoordSys(finder: ParsedModelFinder) {
         || seriesModel && seriesModel.coordinateSystem as Polar;
 }
 
-interface PolarArea {
+interface PolarArea extends CoordinateSystemClipArea {
     cx: number
     cy: number
     r0: number
@@ -261,7 +261,6 @@ interface PolarArea {
     startAngle: number
     endAngle: number
     clockwise: boolean
-    contain(x: number, y: number): boolean
 }
 
 export default Polar;
\ No newline at end of file
diff --git a/src/model/Series.ts b/src/model/Series.ts
index b061a54..55a247a4 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -105,7 +105,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
     })();
 
 
-    init(option: SeriesOption, parentModel: Model, ecModel: GlobalModel) {
+    init(option: Opt, parentModel: Model, ecModel: GlobalModel) {
 
         this.seriesIndex = this.componentIndex;
 
@@ -147,7 +147,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
     /**
      * Util for merge default and theme to option
      */
-    mergeDefaultAndTheme(option: SeriesOption, ecModel: GlobalModel): void {
+    mergeDefaultAndTheme(option: Opt, ecModel: GlobalModel): void {
         var layoutMode = fetchLayoutMode(this);
         var inputPositionParams = layoutMode
             ? getLayoutParams(option as BoxLayoutOptionMixin) : {};
@@ -176,7 +176,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         }
     }
 
-    mergeOption(newSeriesOption: SeriesOption, ecModel: GlobalModel) {
+    mergeOption(newSeriesOption: Opt, ecModel: GlobalModel) {
         // this.settingTask.dirty();
 
         newSeriesOption = zrUtil.merge(this.option, newSeriesOption, true);
@@ -221,7 +221,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
      * Init a data structure from data related option in series
      * Must be overriden.
      */
-    getInitialData(option: SeriesOption, ecModel: GlobalModel): List {
+    getInitialData(option: Opt, ecModel: GlobalModel): List {
         return;
     }
 
@@ -282,9 +282,6 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         inner(this).data = data;
     }
 
-    /**
-     * @return {module:echarts/data/Source} source
-     */
     getSource(): Source {
         return getSource(this);
     }
@@ -302,7 +299,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
      * Can be overrided for some chart.
      * @return {type} description
      */
-    getBaseAxis() { // FIXME:TS type ?
+    getBaseAxis(): Axis {
         var coordSys = this.coordinateSystem;
         // @ts-ignore
         return coordSys && coordSys.getBaseAxis && coordSys.getBaseAxis();


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org