migrate PieSeries and PieView as an example.

src/chart/helper/createListSimply.ts

@@ -19,9 +19,10 @@
 
 // @ts-nocheck
 
-import createDimensions from '../../data/helper/createDimensions';
+import createDimensions, {CreateDimensionsParams} from '../../data/helper/createDimensions';
 import List from '../../data/List';
 import {extend, isArray} from 'zrender/src/core/util';
+import SeriesModel from '../../model/Series';
 
 /**
  * [Usage]:
@@ -32,14 +33,12 @@ import {extend, isArray} from 'zrender/src/core/util';
  *     coordDimensions: ['value'],
  *     dimensionsCount: 5
  * });
- *
- * @param {module:echarts/model/Series} seriesModel
- * @param {Object|Array.<string|Object>} opt opt or coordDimensions
- *        The options in opt, see `echarts/data/helper/createDimensions`
- * @param {Array.<string>} [nameList]
- * @return {module:echarts/data/List}
  */
-export default function (seriesModel, opt, nameList) {
+export default function (
+    seriesModel: SeriesModel,
+    opt: CreateDimensionsParams | CreateDimensionsParams['coordDimensions'],
+    nameList?: string[]
+): List {
     opt = isArray(opt) && {coordDimensions: opt} || extend({}, opt);
 
     var source = seriesModel.getSource();

src/chart/map/MapSeries.ts

@@ -23,7 +23,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import createListSimply from '../helper/createListSimply';
 import SeriesModel from '../../model/Series';
 import {encodeHTML, addCommas} from '../../util/format';
-import dataSelectableMixin from '../../component/helper/selectableMixin';
+import {DataSelectableMixin} from '../../component/helper/selectableMixin';
 import {retrieveRawAttr} from '../../data/helper/dataProvider';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
 import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
@@ -263,6 +263,6 @@ var MapSeries = SeriesModel.extend({
 
 });
 
-zrUtil.mixin(MapSeries, dataSelectableMixin);
+zrUtil.mixin(MapSeries, DataSelectableMixin.prototype);
 
 export default MapSeries;
\ No newline at end of file

src/chart/pie/PieSeries.ts

@@ -17,26 +17,32 @@
 * under the License.
 */
 
-// @ts-nocheck
-
-import * as echarts from '../../echarts';
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
 import * as modelUtil from '../../util/model';
 import {getPercentWithPrecision} from '../../util/number';
-import dataSelectableMixin from '../../component/helper/selectableMixin';
+import {DataSelectableMixin, SelectableTarget} from '../../component/helper/selectableMixin';
 import {retrieveRawAttr} from '../../data/helper/dataProvider';
 import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
+import SeriesModel from '../../model/Series';
+import { SeriesOption, DataParamsUserOutput, ParsedDataValue } from '../../util/types';
+import List from '../../data/List';
 
+export interface PieOption extends SeriesOption {
+    // FIXME:TS need more. [k: string]: any should be removed finally.
+    [k: string]: any
+}
 
-var PieSeries = echarts.extendSeriesModel({
+class PieSeries extends SeriesModel {
 
-    type: 'series.pie',
+    static type = 'series.pie';
 
-    // Overwrite
-    init: function (option) {
-        PieSeries.superApply(this, 'init', arguments);
+    /**
+     * @overwrite
+     */
+    init(option: PieOption): void {
+        super.init.apply(this, arguments as any);
 
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
@@ -47,23 +53,28 @@ var PieSeries = echarts.extendSeriesModel({
         this.updateSelectedMap(this._createSelectableList());
 
         this._defaultLabelLine(option);
-    },
+    }
 
-    // Overwrite
-    mergeOption: function (newOption) {
-        PieSeries.superCall(this, 'mergeOption', newOption);
+    /**
+     * @overwrite
+     */
+    mergeOption(): void {
+        super.mergeOption.apply(this, arguments as any);
 
         this.updateSelectedMap(this._createSelectableList());
-    },
+    }
 
-    getInitialData: function (option, ecModel) {
+    /**
+     * @overwrite
+     */
+    getInitialData(): List {
         return createListSimply(this, {
             coordDimensions: ['value'],
             encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this)
         });
-    },
+    }
 
-    _createSelectableList: function () {
+    private _createSelectableList(): SelectableTarget[] {
         var data = this.getRawData();
         var valueDim = data.mapDimension('value');
         var targetList = [];
@@ -75,15 +86,17 @@ var PieSeries = echarts.extendSeriesModel({
             });
         }
         return targetList;
-    },
+    }
 
-    // Overwrite
-    getDataParams: function (dataIndex) {
+    /**
+     * @overwrite
+     */
+    getDataParams(dataIndex: number): DataParamsUserOutput {
         var data = this.getData();
-        var params = PieSeries.superCall(this, 'getDataParams', dataIndex);
+        var params = super.getDataParams(dataIndex);
         // FIXME toFixed?
 
-        var valueList = [];
+        var valueList = [] as ParsedDataValue[];
         data.each(data.mapDimension('value'), function (value) {
             valueList.push(value);
         });
@@ -96,9 +109,9 @@ var PieSeries = echarts.extendSeriesModel({
 
         params.$vars.push('percent');
         return params;
-    },
+    }
 
-    _defaultLabelLine: function (option) {
+    private _defaultLabelLine(option: PieOption): void {
         // Extend labelLine emphasis
         modelUtil.defaultEmphasis(option, 'labelLine', ['show']);
 
@@ -109,9 +122,9 @@ var PieSeries = echarts.extendSeriesModel({
             && option.label.show;
         labelLineEmphasisOpt.show = labelLineEmphasisOpt.show
             && option.emphasis.label.show;
-    },
+    }
 
-    defaultOption: {
+    static defaultOption: PieOption = {
         zlevel: 0,
         z: 2,
         legendHoverLink: true,
@@ -201,8 +214,12 @@ var PieSeries = echarts.extendSeriesModel({
 
         animationEasing: 'cubicOut'
     }
-});
 
-zrUtil.mixin(PieSeries, dataSelectableMixin);
+}
+
+interface PieSeries extends DataSelectableMixin {}
+zrUtil.tsMixin(PieSeries, DataSelectableMixin);
+
+SeriesModel.registerClass(PieSeries);
 
-export default PieSeries;
\ No newline at end of file
+export default PieSeries;

src/component/helper/selectableMixin.ts

@@ -17,8 +17,6 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 /**
  * Data selectable mixin for chart series.
  * To eanble data select, option of series must have `selectedMode`.
@@ -26,34 +24,49 @@
  */
 
 import * as zrUtil from 'zrender/src/core/util';
+import Model from '../../model/Model';
+
+export type SelectableTarget = {
+    name: string,
+    value: any,
+    selected: boolean
+};
+
+interface DataSelectableMixin extends Pick<Model, 'get'> {};
+
+class DataSelectableMixin {
+
+    private _targetList: SelectableTarget[];
+
+    // Key: target.name
+    private _selectTargetMap: zrUtil.HashMap<SelectableTarget>;
 
-export default {
 
     /**
-     * @param {Array.<Object>} targetList [{name, value, selected}, ...]
+     * @param targetList [{name, value, selected}, ...]
      *        If targetList is an array, it should like [{name: ..., value: ...}, ...].
      *        If targetList is a "List", it must have coordDim: 'value' dimension and name.
      */
-    updateSelectedMap: function (targetList) {
+    updateSelectedMap(targetList?: SelectableTarget[]): void {
         this._targetList = zrUtil.isArray(targetList) ? targetList.slice() : [];
 
         this._selectTargetMap = zrUtil.reduce(targetList || [], function (targetMap, target) {
             targetMap.set(target.name, target);
             return targetMap;
         }, zrUtil.createHashMap());
-    },
+    }
 
     /**
      * Either name or id should be passed as input here.
      * If both of them are defined, id is used.
      *
-     * @param {string|undefined} name name of data
-     * @param {number|undefined} id dataIndex of data
+     * @param name name of data. Can be null/undefined.
+     * @param idx dataIndex of data. Can be null/undefined.
      */
     // PENGING If selectedMode is null ?
-    select: function (name, id) {
-        var target = id != null
-            ? this._targetList[id]
+    select(name?: string, idx?: number): void {
+        var target = idx != null
+            ? this._targetList[idx]
             : this._selectTargetMap.get(name);
         var selectedMode = this.get('selectedMode');
         if (selectedMode === 'single') {
@@ -62,52 +75,54 @@ export default {
             });
         }
         target && (target.selected = true);
-    },
+    }
 
     /**
      * Either name or id should be passed as input here.
      * If both of them are defined, id is used.
      *
-     * @param {string|undefined} name name of data
-     * @param {number|undefined} id dataIndex of data
+     * @param name name of data. Can be null/undefined.
+     * @param idx dataIndex of data. Can be null/undefined.
      */
-    unSelect: function (name, id) {
-        var target = id != null
-            ? this._targetList[id]
+    unSelect(name?: string, idx?: number): void {
+        var target = idx != null
+            ? this._targetList[idx]
             : this._selectTargetMap.get(name);
         // var selectedMode = this.get('selectedMode');
         // selectedMode !== 'single' && target && (target.selected = false);
         target && (target.selected = false);
-    },
+    }
 
     /**
      * Either name or id should be passed as input here.
      * If both of them are defined, id is used.
      *
-     * @param {string|undefined} name name of data
-     * @param {number|undefined} id dataIndex of data
+     * @param name name of data. Can be null/undefined.
+     * @param idx dataIndex of data. Can be null/undefined.
      */
-    toggleSelected: function (name, id) {
-        var target = id != null
-            ? this._targetList[id]
+    toggleSelected(name?: string, idx?: number): boolean {
+        var target = idx != null
+            ? this._targetList[idx]
             : this._selectTargetMap.get(name);
         if (target != null) {
-            this[target.selected ? 'unSelect' : 'select'](name, id);
+            this[target.selected ? 'unSelect' : 'select'](name, idx);
             return target.selected;
         }
-    },
+    }
 
     /**
      * Either name or id should be passed as input here.
      * If both of them are defined, id is used.
      *
-     * @param {string|undefined} name name of data
-     * @param {number|undefined} id dataIndex of data
+     * @param name name of data. Can be null/undefined.
+     * @param idx dataIndex of data. Can be null/undefined.
      */
-    isSelected: function (name, id) {
-        var target = id != null
-            ? this._targetList[id]
+    isSelected(name?: string, idx?: number): boolean {
+        var target = idx != null
+            ? this._targetList[idx]
             : this._selectTargetMap.get(name);
         return target && target.selected;
     }
-};
\ No newline at end of file
+}
+
+export {DataSelectableMixin};

src/coord/geo/GeoModel.ts

@@ -23,7 +23,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as modelUtil from '../../util/model';
 import ComponentModel from '../../model/Component';
 import Model from '../../model/Model';
-import selectableMixin from '../../component/helper/selectableMixin';
+import {DataSelectableMixin} from '../../component/helper/selectableMixin';
 import geoCreator from './geoCreator';
 
 var GeoModel = ComponentModel.extend({
@@ -176,6 +176,6 @@ var GeoModel = ComponentModel.extend({
     }
 });
 
-zrUtil.mixin(GeoModel, selectableMixin);
+zrUtil.mixin(GeoModel, DataSelectableMixin.prototype);
 
 export default GeoModel;
\ No newline at end of file

src/data/List.ts

@@ -30,13 +30,13 @@ import Model from '../model/Model';
 import DataDiffer from './DataDiffer';
 import Source, { SourceConstructor } from './Source';
 import {DefaultDataProvider, DataProvider} from './helper/dataProvider';
-import {summarizeDimensions, DimensionSummary, DimensionUserOuput} from './helper/dimensionHelper';
+import {summarizeDimensions, DimensionSummary} from './helper/dimensionHelper';
 import DataDimensionInfo from './DataDimensionInfo';
 import {ArrayLike, Dictionary, FunctionPropertyNames} from 'zrender/src/core/types';
 import Element from 'zrender/src/Element';
 import {
     DimensionIndex, DimensionName, ECElement, DimensionLoose, OptionDataItem,
-    ParsedDataValue, ParsedDataNumeric, OrdinalRawValueIndex
+    ParsedDataValue, ParsedDataNumeric, OrdinalRawValueIndex, DimensionUserOuput
 } from '../util/types';
 import {parseDate} from '../util/number';
 import {isDataItemOption} from '../util/model';
@@ -330,10 +330,10 @@ class List {
      *        If idx is number, and not found, return null/undefined.
      *        If idx is `true`, and not found, return empty array (always return array).
      */
-    mapDimension<Idx extends (number | true)>(
-        coordDim: DimensionName,
-        idx?: Idx
-    ): (true extends Idx ? DimensionName[] : DimensionName) {
+    mapDimension(coordDim: DimensionName): DimensionName;
+    mapDimension(coordDim: DimensionName, idx: true): DimensionName[];
+    mapDimension(coordDim: DimensionName, idx: number): DimensionName;
+    mapDimension(coordDim: DimensionName, idx?: true | number): DimensionName | DimensionName[] {
         var dimensionsSummary = this._dimensionsSummary;
 
         if (idx == null) {

src/data/helper/createDimensions.ts

@@ -17,31 +17,42 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 /**
  * Substitute `completeDimensions`.
  * `completeDimensions` is to be deprecated.
  */
 import completeDimensions from './completeDimensions';
+import { DimensionDefinitionLoose, OptionEncode, OptionEncodeValue, EncodeDefaulter } from '../../util/types';
+import Source from '../Source';
+import List from '../List';
+import DataDimensionInfo from '../DataDimensionInfo';
+import { HashMap } from 'zrender/src/core/util';
+
+export type CreateDimensionsParams = {
+    coordDimensions?: DimensionDefinitionLoose[],
+    dimensionsDefine?: DimensionDefinitionLoose[],
+    encodeDefine?: HashMap<OptionEncodeValue> | OptionEncode,
+    dimensionsCount?: number,
+    encodeDefaulter?: EncodeDefaulter,
+    generateCoord?: boolean,
+    generateCoordCount?: number
+};
 
 /**
- * @param {module:echarts/data/Source|module:echarts/data/List} source or data.
- * @param {Object|Array} [opt]
- * @param {Array.<string|Object>} [opt.coordDimensions=[]]
- * @param {number} [opt.dimensionsCount]
- * @param {string} [opt.generateCoord]
- * @param {string} [opt.generateCoordCount]
- * @param {Array.<string|Object>} [opt.dimensionsDefine=source.dimensionsDefine] Overwrite source define.
- * @param {Object|HashMap} [opt.encodeDefine=source.encodeDefine] Overwrite source define.
- * @param {Function} [opt.encodeDefaulter] Make default encode if user not specified.
- * @return {Array.<Object>} dimensionsInfo
+ * @param opt.coordDimensions
+ * @param opt.dimensionsDefine By default `source.dimensionsDefine` Overwrite source define.
+ * @param opt.encodeDefine By default `source.encodeDefine` Overwrite source define.
+ * @param opt.encodeDefaulter Make default encode if user not specified.
  */
-export default function (source, opt) {
+export default function (
+    source: Source | List,
+    opt?: CreateDimensionsParams
+): DataDimensionInfo[] {
     opt = opt || {};
     return completeDimensions(opt.coordDimensions || [], source, {
-        dimsDef: opt.dimensionsDefine || source.dimensionsDefine,
-        encodeDef: opt.encodeDefine || source.encodeDefine,
+        // FIXME:TS detect whether source then call `.dimensionsDefine` and `.encodeDefine`?
+        dimsDef: opt.dimensionsDefine || (source as Source).dimensionsDefine,
+        encodeDef: opt.encodeDefine || (source as Source).encodeDefine,
         dimCount: opt.dimensionsCount,
         encodeDefaulter: opt.encodeDefaulter,
         generateCoord: opt.generateCoord,

src/data/helper/dimensionHelper.ts

@@ -23,7 +23,7 @@ import {each, createHashMap, assert} from 'zrender/src/core/util';
 import { __DEV__ } from '../../config';
 import List from '../List';
 import {
-    DimensionName, DimensionIndex, VISUAL_DIMENSIONS, DimensionType
+    DimensionName, VISUAL_DIMENSIONS, DimensionType, DimensionUserOuput
 } from '../../util/types';
 
 export type DimensionSummaryEncode = {
@@ -33,16 +33,6 @@ export type DimensionSummaryEncode = {
         // index: coordDimIndex, value: dataDimName
         DimensionName[]
 };
-export type DimensionUserOuputEncode = {
-    [coordOrVisualDimName: string]:
-        // index: coordDimIndex, value: dataDimIndex
-        DimensionIndex[]
-};
-export type DimensionUserOuput = {
-    // The same as `data.dimensions`
-    dimensionNames: DimensionName[]
-    encode: DimensionUserOuputEncode
-};
 export type DimensionSummary = {
     encode: DimensionSummaryEncode,
     // Those details that can be expose to users are put int `userOutput`.

src/echarts.ts

@@ -1121,7 +1121,15 @@ class ECharts {
                     var classType = parseClassType(model.type);
                     var Clazz = isComponent
                         ? (ComponentView as ComponentViewConstructor).getClass(classType.main, classType.sub)
-                        : (ChartView as ChartViewConstructor).getClass(classType.sub);
+                        : (
+                            // FIXME:TS
+                            // (ChartView as ChartViewConstructor).getClass('series', classType.sub)
+                            // For backward compat, still support a chart type declared as only subType
+                            // like "liquidfill", but recommend "series.liquidfill"
+                            // But need a base class to make a type series.
+                            // ||
+                            (ChartView as ChartViewConstructor).getClass(classType.sub)
+                        );
 
                     if (__DEV__) {
                         assert(Clazz, classType.sub + ' does not exist.');

src/model/Component.ts

@@ -34,7 +34,7 @@ import * as layout from '../util/layout';
 import boxLayoutMixin from './mixin/boxLayout';
 import { CoordinateSystem } from '../coord/CoordinateSystem';
 import GlobalModel from './Global';
-import { ComponentOption, ComponentMainType, ComponentSubType } from '../util/types';
+import { ComponentOption, ComponentMainType, ComponentSubType, ComponentFullType } from '../util/types';
 
 var inner = makeInner();
 
@@ -49,7 +49,7 @@ class ComponentModel extends Model {
     /**
      * @readonly
      */
-    type: string;
+    type: ComponentFullType;
 
     /**
      * @readonly
@@ -176,10 +176,12 @@ class ComponentModel extends Model {
      *     aaa: number
      * }
      * export class XxxModel extends Component {
-     *     readonly defaultOption: XxxOption = {
+     *     static type = 'xxx';
+     *     static defaultOption: XxxOption = {
      *         aaa: 123
      *     }
      * }
+     * Component.registerClass(XxxModel);
      * ```
      * ```ts
      * import {mergeOption} from '../model/util';
@@ -225,7 +227,8 @@ class ComponentModel extends Model {
         // in legacy env and auto merge defaultOption. So if using class
         // declaration, defaultOption should be merged manually.
         if (!isExtendedClass(ctor)) {
-            return ctor.prototype.defaultOption;
+            // When using ts class, defaultOption must be declared as static.
+            return (ctor as any).defaultOption;
         }
 
         // FIXME: remove this approach?
@@ -256,6 +259,7 @@ class ComponentModel extends Model {
         });
     }
 
+    static registerClass: ClassManager['registerClass'];
 }
 
 // Reset ComponentModel.extend, add preConstruct.

src/model/Global.ts

@@ -40,7 +40,7 @@ import * as modelUtil from '../util/model';
 import Model from './Model';
 import ComponentModel, {ComponentModelConstructor} from './Component';
 import globalDefault from './globalDefault';
-import ColorPaletteMixin from './mixin/colorPalette';
+import {ColorPaletteMixin} from './mixin/colorPalette';
 import {resetSourceDefaulter} from '../data/helper/sourceHelper';
 import SeriesModel from './Series';
 import { Payload, OptionPreprocessor, ECOption, ECUnitOption, ThemeOption, ComponentOption, ComponentMainType, ComponentSubType } from '../util/types';

src/model/Model.ts

@@ -31,10 +31,10 @@ import {
     CheckableConstructor
 } from '../util/clazz';
 
-import lineStyleMixin from './mixin/lineStyle';
 import areaStyleMixin from './mixin/areaStyle';
 import textStyleMixin from './mixin/textStyle';
-import itemStyleMixin from './mixin/itemStyle';
+import {LineStyleMixin} from './mixin/lineStyle';
+import {ItemStyleMixin} from './mixin/itemStyle';
 import GlobalModel from './Global';
 import { ModelOption } from '../util/types';
 import { Dictionary } from 'zrender/src/core/types';
@@ -254,9 +254,11 @@ type ModelConstructor = typeof Model
 enableClassExtend(Model as ModelConstructor);
 enableClassCheck(Model as ModelConstructor);
 
-mixin(Model, lineStyleMixin);
+interface Model extends LineStyleMixin, ItemStyleMixin {}
+
+zrUtil.tsMixin(Model, LineStyleMixin);
 mixin(Model, areaStyleMixin);
 mixin(Model, textStyleMixin);
-mixin(Model, itemStyleMixin);
+zrUtil.tsMixin(Model, ItemStyleMixin);
 
 export default Model;

src/model/Series.ts

@@ -32,7 +32,7 @@ import {
     SeriesOption, ComponentLayoutMode, TooltipRenderMode, AxisValue, ZRColor
 } from '../util/types';
 import ComponentModel, { ComponentModelConstructor } from './Component';
-import ColorPaletteMixin from './mixin/colorPalette';
+import {ColorPaletteMixin} from './mixin/colorPalette';
 import DataFormatMixin from '../model/mixin/dataFormat';
 import Model from '../model/Model';
 import {
@@ -47,9 +47,9 @@ import {
 import {retrieveRawValue} from '../data/helper/dataProvider';
 import GlobalModel from './Global';
 import { CoordinateSystem } from '../coord/CoordinateSystem';
-import { ExtendableConstructor, mountExtend } from '../util/clazz';
+import { ExtendableConstructor, mountExtend, ClassManager, Constructor } from '../util/clazz';
 import { PipelineContext, SeriesTaskContext, GeneralTask, OverallTask, SeriesTask } from '../stream/Scheduler';
-import { LegendVisualProviderType } from '../visual/LegendVisualProvider';
+import LegendVisualProvider from '../visual/LegendVisualProvider';
 import List from '../data/List';
 import Source from '../data/Source';
 
@@ -66,6 +66,9 @@ class SeriesModel extends ComponentModel {
     // @readonly
     type: string;
 
+    // Should be implenented in subclass.
+    defaultOption: SeriesOption;
+
     // @readonly
     seriesIndex: number;
 
@@ -78,7 +81,7 @@ class SeriesModel extends ComponentModel {
     pipelineContext: PipelineContext;
 
     // legend visual provider to the legend component
-    legendVisualProvider: LegendVisualProviderType;
+    legendVisualProvider: LegendVisualProvider;
 
     // Access path of color for visual
     visualColorAccessPath: string;
@@ -540,6 +543,9 @@ class SeriesModel extends ComponentModel {
      */
     preventIncremental: () => boolean;
 
+    static registerClass(clz: Constructor): Constructor {
+        return ComponentModel.registerClass(clz);
+    }
 }
 
 interface SeriesModel extends DataFormatMixin, ColorPaletteMixin, DataHost {}

src/model/mixin/colorPalette.ts

@@ -36,7 +36,7 @@ function getNearestColorPalette(
     return colors[paletteNum - 1];
 }
 
-interface ColorPaletteMixin extends Model {}
+interface ColorPaletteMixin extends Pick<Model, 'get'> {}
 
 class ColorPaletteMixin {
 
@@ -87,4 +87,4 @@ class ColorPaletteMixin {
     }
 };
 
-export default ColorPaletteMixin
+export {ColorPaletteMixin};

src/model/mixin/dataFormat.ts

@@ -20,43 +20,13 @@
 import {retrieveRawValue} from '../../data/helper/dataProvider';
 import {getTooltipMarker, formatTpl, TooltipMarker} from '../../util/format';
 import { getTooltipRenderMode } from '../../util/model';
-import { DataHost, DisplayStatus, DimensionName, TooltipRenderMode } from '../../util/types';
+import { DataHost, DisplayState, TooltipRenderMode, DataParamsUserOutput } from '../../util/types';
 import GlobalModel from '../Global';
 import Element from 'zrender/src/Element';
-import { DimensionUserOuputEncode } from '../../data/helper/dimensionHelper';
 
 var DIMENSION_LABEL_REG = /\{@(.+?)\}/g;
 
 
-interface DataParams {
-    // component main type
-    componentType: string;
-    // component sub type
-    componentSubType: string;
-    componentIndex: number;
-    // series component sub type
-    seriesType?: string;
-    // series component index (the alias of `componentIndex` for series)
-    seriesIndex?: number;
-    seriesId?: string;
-    seriesName?: string;
-    name: string;
-    dataIndex: number;
-    data: any;
-    dataType?: string;
-    value: any;
-    color?: string;
-    borderColor?: string;
-    dimensionNames?: DimensionName[];
-    encode?: DimensionUserOuputEncode;
-    marker?: TooltipMarker;
-    status?: DisplayStatus;
-    dimensionIndex?: number;
-
-    // Param name list for mapping `a`, `b`, `c`, `d`, `e`
-    $vars: string[];
-}
-
 interface DataFormatMixin extends DataHost {
     ecModel: GlobalModel;
     mainType: string;
@@ -76,7 +46,7 @@ class DataFormatMixin {
         dataIndex: number,
         dataType?: string,
         el?: Element // May be used in override.
-    ): DataParams {
+    ): DataParamsUserOutput {
 
         var data = this.getData(dataType);
         var rawValue = this.getRawValue(dataIndex, dataType);
@@ -132,7 +102,7 @@ class DataFormatMixin {
     getFormattedLabel(
         this: DataFormatMixin,
         dataIndex: number,
-        status?: DisplayStatus,
+        status?: DisplayState,
         dataType?: string,
         dimIndex?: number,
         labelProp?: string

src/model/mixin/itemStyle.ts

@@ -17,9 +17,8 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import makeStyleMapper from './makeStyleMapper';
+import Model from '../Model';
 
 var getItemStyle = makeStyleMapper(
     [
@@ -36,17 +35,22 @@ var getItemStyle = makeStyleMapper(
     ]
 );
 
-export default {
-    getItemStyle: function (excludes, includes) {
+interface ItemStyleMixin extends Pick<Model, 'get'> {}
+
+class ItemStyleMixin {
+
+    getItemStyle(excludes?: string[], includes?: string[]) {
         var style = getItemStyle(this, excludes, includes);
         var lineDash = this.getBorderLineDash();
-        lineDash && (style.lineDash = lineDash);
+        lineDash && ((style as any).lineDash = lineDash);
         return style;
-    },
+    }
 
-    getBorderLineDash: function () {
+    getBorderLineDash() {
         var lineType = this.get('borderType');
         return (lineType === 'solid' || lineType == null) ? null
             : (lineType === 'dashed' ? [5, 5] : [1, 1]);
     }
-};
\ No newline at end of file
+}
+
+export {ItemStyleMixin};

src/model/mixin/lineStyle.ts

@@ -17,9 +17,8 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import makeStyleMapper from './makeStyleMapper';
+import Model from '../Model';
 
 var getLineStyle = makeStyleMapper(
     [
@@ -33,16 +32,19 @@ var getLineStyle = makeStyleMapper(
     ]
 );
 
-export default {
-    getLineStyle: function (excludes) {
+interface LineStyleMixin extends Pick<Model, 'get'> {}
+
+class LineStyleMixin {
+
+    getLineStyle(excludes?: string[]) {
         var style = getLineStyle(this, excludes);
         // Always set lineDash whether dashed, otherwise we can not
         // erase the previous style when assigning to el.style.
-        style.lineDash = this.getLineDash(style.lineWidth);
+        (style as any).lineDash = this.getLineDash((style as any).lineWidth);
         return style;
-    },
+    }
 
-    getLineDash: function (lineWidth) {
+    getLineDash(lineWidth?: number) {
         if (lineWidth == null) {
             lineWidth = 1;
         }
@@ -60,4 +62,6 @@ export default {
             ? [dashSize, dashSize]
             : [dotSize, dotSize];
     }
-};
\ No newline at end of file
+};
+
+export {LineStyleMixin};

src/model/mixin/makeStyleMapper.ts

@@ -30,7 +30,7 @@ export default function (properties) {
             properties[i][1] = properties[i][0];
         }
     }
-    return function (model, excludes, includes) {
+    return function (model, excludes, includes?) {
         var style = {};
         for (var i = 0; i < properties.length; i++) {
             var propName = properties[i][1];

src/util/clazz.ts

@@ -189,11 +189,11 @@ function superApply(this: any, context: any, methodName: string, args: any): any
     return this.superClass.prototype[methodName].apply(context, args);
 }
 
-type Constructor = new (...args: any) => any;
+export type Constructor = new (...args: any) => any;
 type SubclassContainer = {[subType: string]: Constructor} & {[IS_CONTAINER]?: true};
 
 export interface ClassManager {
-    registerClass: (clz: Constructor, componentType: ComponentFullType) => Constructor;
+    registerClass: (clz: Constructor) => Constructor;
     getClass: (
         componentMainType: ComponentMainType, subType?: ComponentSubType, throwWhenNotFound?: boolean
     ) => Constructor;
@@ -232,12 +232,23 @@ export function enableClassManagement(
     } = {};
 
     target.registerClass = function (
-        clz: Constructor,
-        componentType: ComponentFullType
+        clz: Constructor
     ): Constructor {
-        if (componentType) {
-            checkClassType(componentType);
-            var componentTypeInfo = parseClassType(componentType);
+
+        // `type` should not be a "instance memeber".
+        // If using TS class, should better declared as `static type = 'series.pie'`.
+        // otherwise users have to mount `type` on prototype manually.
+        // For backward compat and enable instance visit type via `this.type`,
+        // we stil support fetch `type` from prototype.
+        var componentFullType = (clz as any).type || clz.prototype.type;
+
+        if (componentFullType) {
+            checkClassType(componentFullType);
+
+            // If only static type declared, we assign it to prototype mandatorily.
+            clz.prototype.type = componentFullType;
+
+            var componentTypeInfo = parseClassType(componentFullType);
 
             if (!componentTypeInfo.sub) {
                 if (__DEV__) {
@@ -336,7 +347,7 @@ export function enableClassManagement(
         if (originalExtend) {
             (target as any).extend = function (proto: any) {
                 var ExtendedClass = originalExtend.call(this, proto);
-                return target.registerClass(ExtendedClass, proto.type);
+                return target.registerClass(ExtendedClass);
             };
         }
     }

src/util/graphic.ts

@@ -559,7 +559,7 @@ function shouldSilent(el, e) {
  * @param {Function} [el.highDownOnUpdate] See `graphic.setAsHighDownDispatcher`.
  * @param {Object|boolean} [hoverStyle] See `graphic.setElementHoverStyle`.
  */
-export function setHoverStyle(el, hoverStyle) {
+export function setHoverStyle(el, hoverStyle?) {
     setAsHighDownDispatcher(el, true);
     traverseUpdate(el, setElementHoverStyle, hoverStyle);
 }
@@ -666,7 +666,7 @@ export function setLabelStyle(
     normalStyle, emphasisStyle,
     normalModel, emphasisModel,
     opt,
-    normalSpecified, emphasisSpecified
+    normalSpecified, emphasisSpecified?
 ) {
     opt = opt || EMPTY_OBJ;
     var labelFetcher = opt.labelFetcher;
@@ -1143,7 +1143,7 @@ function animateOrSetProps(isUpdate, el, props, animatableModel, dataIndex, cb)
  *         position: [100, 100]
  *     }, seriesModel, function () { console.log('Animation done!'); });
  */
-export function updateProps(el, props, animatableModel, dataIndex, cb) {
+export function updateProps(el, props, animatableModel, dataIndex, cb?) {
     animateOrSetProps(true, el, props, animatableModel, dataIndex, cb);
 }
 
@@ -1161,7 +1161,7 @@ export function updateProps(el, props, animatableModel, dataIndex, cb) {
  * @param {number} [dataIndex]
  * @param {Function} cb
  */
-export function initProps(el, props, animatableModel, dataIndex, cb) {
+export function initProps(el, props, animatableModel, dataIndex, cb?) {
     animateOrSetProps(false, el, props, animatableModel, dataIndex, cb);
 }
 

src/util/model.ts

@@ -23,7 +23,7 @@ import Component from '../model/Component';
 import GlobalModel, { QueryConditionKindB } from '../model/Global';
 import ComponentModel from '../model/Component';
 import List from '../data/List';
-import { Payload, ComponentOption, ComponentMainType, ComponentSubType, DisplayStatusHostOption, OptionDataItem, OptionDataPrimitive, TooltipRenderMode } from './types';
+import { Payload, ComponentOption, ComponentMainType, ComponentSubType, DisplayStateHostOption, OptionDataItem, OptionDataPrimitive, TooltipRenderMode } from './types';
 import { Dictionary } from 'zrender/src/core/types';
 
 var each = zrUtil.each;
@@ -63,7 +63,7 @@ export function normalizeToArray<T>(value: T | T[]): T[] {
  *     }
  */
 export function defaultEmphasis(
-    opt: DisplayStatusHostOption,
+    opt: DisplayStateHostOption,
     key: string,
     subOpts: string[]
 ): void {

src/util/types.ts

@@ -37,6 +37,8 @@ import List, {ListDimensionType} from '../data/List';
 import { Dictionary } from 'zrender/src/core/types';
 import { GradientObject } from 'zrender/src/graphic/Gradient';
 import { PatternObject } from 'zrender/src/graphic/Pattern';
+import Source from '../data/Source';
+import { TooltipMarker } from './format';
 
 
 
@@ -259,7 +261,6 @@ export type SourceFormat =
     | typeof SOURCE_FORMAT_TYPED_ARRAY
     | typeof SOURCE_FORMAT_UNKNOWN;
 
-// FIXME:TS remove it finally
 export var SERIES_LAYOUT_BY_COLUMN = 'column' as const;
 export var SERIES_LAYOUT_BY_ROW = 'row' as const;
 
@@ -369,13 +370,12 @@ export type OptionDataItem =
     | {value: ArrayLike<OptionDataPrimitive>}; // Only for `SOURCE_FORMAT_KEYED_ORIGINAL`
 export type OptionDataPrimitive = string | number | Date;
 
-// FIXME:TS in fact ModelOption can be any?
 // export type ModelOption = Dictionary<any> | any[] | string | number | boolean | ((...args: any) => any);
 export type ModelOption = any;
 export type ThemeOption = Dictionary<any>;
 
-export type DisplayStatus = 'normal' | 'emphasis';
-export type DisplayStatusHostOption = {
+export type DisplayState = 'normal' | 'emphasis';
+export type DisplayStateHostOption = {
     emphasis?: Dictionary<any>,
     [key: string]: any
 };
@@ -393,6 +393,47 @@ export interface OptionEncode extends OptionEncodeVisualDimensions {
     [coordDim: string]: OptionEncodeValue
 }
 export type OptionEncodeValue = DimensionIndex[] | DimensionIndex | DimensionName[] | DimensionName;
+export type EncodeDefaulter = (source: Source, dimCount: number) => OptionEncode;
+
+export interface DataParamsUserOutput {
+    // component main type
+    componentType: string;
+    // component sub type
+    componentSubType: string;
+    componentIndex: number;
+    // series component sub type
+    seriesType?: string;
+    // series component index (the alias of `componentIndex` for series)
+    seriesIndex?: number;
+    seriesId?: string;
+    seriesName?: string;
+    name: string;
+    dataIndex: number;
+    data: any;
+    dataType?: string;
+    value: any;
+    color?: string;
+    borderColor?: string;
+    dimensionNames?: DimensionName[];
+    encode?: DimensionUserOuputEncode;
+    marker?: TooltipMarker;
+    status?: DisplayState;
+    dimensionIndex?: number;
+    percent?: number; // Only for chart like 'pie'
+
+    // Param name list for mapping `a`, `b`, `c`, `d`, `e`
+    $vars: string[];
+}
+export type DimensionUserOuputEncode = {
+    [coordOrVisualDimName: string]:
+        // index: coordDimIndex, value: dataDimIndex
+        DimensionIndex[]
+};
+export type DimensionUserOuput = {
+    // The same as `data.dimensions`
+    dimensionNames: DimensionName[]
+    encode: DimensionUserOuputEncode
+};
 
 export interface MediaQuery {
     minWidth?: number;

src/view/Chart.ts

@@ -31,7 +31,7 @@ import ExtensionAPI from '../ExtensionAPI';
 import Element from 'zrender/src/Element';
 import {
     Payload, ViewRootGroup, ECEvent, EventQueryItem,
-    StageHandlerPlanReturn, DisplayStatus, StageHandlerProgressParams
+    StageHandlerPlanReturn, DisplayState, StageHandlerProgressParams
 } from '../util/types';
 import { SeriesTaskContext, SeriesTask } from '../stream/Scheduler';
 import List from '../data/List';
@@ -180,13 +180,14 @@ class Chart {
         inner(payload).updateMethod = methodName;
     }
 
+    static registerClass: clazzUtil.ClassManager['registerClass'];
 };
 
 
 /**
  * Set state of single element
  */
-function elSetState(el: Element, state: DisplayStatus, highlightDigit: number) {
+function elSetState(el: Element, state: DisplayState, highlightDigit: number) {
     if (el) {
         el.trigger(state, highlightDigit);
         if (el.isGroup
@@ -200,7 +201,7 @@ function elSetState(el: Element, state: DisplayStatus, highlightDigit: number) {
     }
 }
 
-function toggleHighlight(data: List, payload: Payload, state: DisplayStatus) {
+function toggleHighlight(data: List, payload: Payload, state: DisplayState) {
     var dataIndex = modelUtil.queryDataIndex(data, payload);
 
     var highlightDigit = (payload && payload.highlightKey != null)

src/view/Component.ts

@@ -83,6 +83,7 @@ class Component {
         seriesModel: ComponentModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload
     ) => void | {update: true};
 
+    static registerClass: clazzUtil.ClassManager['registerClass'];
 };
 
 export type ComponentViewConstructor = typeof Component

src/visual/LegendVisualProvider.ts

@@ -67,4 +67,3 @@ class LegendVisualProvider {
 }
 
 export default LegendVisualProvider;
-export type LegendVisualProviderType = typeof LegendVisualProvider;