feat: 完善 ts 定义 (#1238)

antvis · Nov 8, 2021 · 6c49bb9 · 6c49bb9
1 parent 9264e65
commit 6c49bb9
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 16 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,9 @@ module.exports = {
     'no-prototype-builtins': 0,
     'no-case-declarations': 0,
     '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/no-unused-vars': [
+      'warn', { argsIgnorePattern: "^_" }
+    ],
   },
   settings: {
     'import/parsers': {

diff --git a/packages/f2/src/base/component.ts b/packages/f2/src/base/component.ts
@@ -1,5 +1,5 @@
-class Component {
-  props: any;
+class Component<T = any> {
+  props: T;
   state: any;
   context: any;
   refs: {

diff --git a/packages/f2/src/components/axis/axisView.tsx b/packages/f2/src/components/axis/axisView.tsx
@@ -5,18 +5,20 @@ import Top from './rect/top';
 import Bottom from './rect/bottom';
 import Right from './rect/right';
 import Left from './rect/left';
+import { PolarAxisProps, RectAxisProps } from './types';
 
-export default (props: any) => {
-  const { coord, dimType, position } = props;
-  const { isPolar } = coord;
+export default (props: PolarAxisProps | RectAxisProps) => {
+  const { isPolar } = props.coord;
   // 极坐标
   if (isPolar) {
+    const { dimType } = props as PolarAxisProps;
     if (dimType === 'x') {
       return <PolarX { ...props } />;
     }
     return <PolarY { ...props } />;
   }
 
+  const { position } = props as RectAxisProps;
   // 直角坐标
   if (position === 'right') {
     return <Right { ...props } />

diff --git a/packages/f2/src/components/axis/polar/polar-x.tsx b/packages/f2/src/components/axis/polar/polar-x.tsx
@@ -1,6 +1,6 @@
 import { jsx } from '../../../jsx';
 import { Vector2 } from '@antv/f2-graphic';
-
+import { PolarProps } from '../types';
 // const { Vector2 } = G;
 
 // 相对圆心偏移量的点
@@ -50,7 +50,7 @@ function getTextAlignInfo(center, point) {
   };
 }
 
-export default (props) => {
+export default (props: PolarProps) => {
   const { ticks, coord, style } = props;
   const { center } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/polar/polar-y.tsx b/packages/f2/src/components/axis/polar/polar-y.tsx
@@ -1,7 +1,8 @@
 import { jsx } from '../../../jsx';
 import { Vector2 } from '@antv/f2-graphic';
+import { PolarProps } from '../types';
 
-export default (props) => {
+export default (props: PolarProps) => {
   const { ticks, coord, style } = props;
   const { center } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/rect/bottom.tsx b/packages/f2/src/components/axis/rect/bottom.tsx
@@ -1,6 +1,7 @@
 import { jsx } from '../../../';
+import { RectProps } from '../types';
 
-export default (props: any) => {
+export default (props: RectProps<'bottom'>) => {
   const { ticks, coord, style, animation } = props;
   const { left, top, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/rect/left.tsx b/packages/f2/src/components/axis/rect/left.tsx
@@ -1,6 +1,7 @@
 import { jsx } from '../../../jsx';
+import { RectProps } from '../types';
 
-export default (props: any) => {
+export default (props: RectProps) => {
   const { ticks, coord, style, animation } = props;
   const { left, top, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/rect/right.tsx b/packages/f2/src/components/axis/rect/right.tsx
@@ -1,6 +1,7 @@
 import { jsx } from '../../../jsx';
+import { RectProps } from '../types';
 
-export default (props: any) => {
+export default (props: RectProps) => {
   const { ticks, coord, style } = props;
   const { left, top, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/rect/top.tsx b/packages/f2/src/components/axis/rect/top.tsx
@@ -1,6 +1,7 @@
 import { jsx } from '../../../jsx';
+import { RectProps } from '../types';
 
-export default (props: any) => {
+export default (props: RectProps) => {
   const { ticks, coord, style } = props;
   const { left, top, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label } = style;

diff --git a/packages/f2/src/components/axis/types.ts b/packages/f2/src/components/axis/types.ts
@@ -0,0 +1,97 @@
+import Coord from '../../coord';
+
+interface Line {
+  lineWidth?: number;
+  strokeOpacity?: number;
+  stroke: string;
+  strokeStyle?: string;
+  lineCap?: 'butt' | 'round' | 'square';
+  lineJoin?: 'round' | 'bevel' | 'miter';
+  lineDash?: number[];
+  [key: string]: any;
+}
+
+interface TickLine extends Line {
+  length?: number; // tick line 的长度
+}
+
+interface Text {
+  text?: string;
+  fontStyle?: 'normal' | 'italic' | 'oblique';
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?:
+  | 'normal'
+  | 'bold'
+  | 'bolder'
+  | 'lighter'
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900;
+  fontVariant?: 'normal' | 'small-caps';
+  textAlign?: 'left' | 'right' | 'start' | 'center' | 'end';
+  align?: 'left' | 'right' | 'start' | 'center' | 'end' | 'between';  
+  textBaseline?: 'top' | 'middle' | 'bottom';
+  fill?: string;
+  fillStyle?: string;  // 普通文本(fillText)的颜色
+  stroke?: string;
+  strokeStyle?: string; // 描边文本(strokeText)的颜色
+  lineHeight?: number;
+  lineWidth?: number;  // 用于描边文本
+  [key: string]: any;
+}
+
+// 仅在 bottom 下新增了 align 支持 `between`
+type StyleText<T = any> = T extends 'bottom' ? Text : Omit<Text, 'align'>;
+
+export interface Style<Type = void> {
+  grid: Line;
+  tickLine: TickLine;
+  line: Line;
+  labelOffset: number;
+  label: StyleText<Type>;
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface Tick {
+  points: Point[];
+  text: string;
+  tickValue: string | number;
+}
+
+type PolarCord = Pick<Coord, 'center'>;
+type RectCord = Pick<Coord, 'left' | 'right' | 'bottom' | 'top'>;
+
+export interface RectProps<Type = void> {
+  ticks?: Tick[];
+  coord?: RectCord;
+  animation?: any;
+  style?: Style<Type>;
+}
+
+export interface PolarProps {
+  ticks?: Tick[];
+  coord?: PolarCord;
+  style?: Style;
+  animation?: any;
+}
+
+export interface PolarAxisProps {
+  coord: Coord;
+  dimType: 'x' | 'y';
+}
+
+export interface RectAxisProps {
+  coord: Coord;
+  position: 'right' | 'left' | 'top' | 'bottom';
+}
diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -3,13 +3,23 @@ import { jsx } from '../../jsx';
 import equal from '../../base/equal';
 import Component from '../../base/component';
 import Chart from '../../chart';
+import Coord from '../../coord';
+import { Style } from './types';
+
+export interface WithAxisProps {
+  chart: Chart;
+  field: string;
+  coord: Coord;
+  visible: boolean;
+  position: 'right' | 'left' | 'top' | 'bottom';
+}
 
 export default (View) => {
   return class Axis extends Component {
     chart: Chart;
-    style: any;
+    style: Style;
 
-    constructor(props) {
+    constructor(props: WithAxisProps) {
       super(props);
       const { chart, field } = props;
 

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -11,11 +11,11 @@ class ErrorBoundary extends React.Component<
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error, _errorInfo) {
     console.error("图表渲染失败: ", error);
   }