Property 'coordinate' and 'parsePoint' does not exist on type 'RegisterShape'

[unfloned]

this errors happens when i use this example: https://charts.ant.design/en/examples/progress-plots/gauge#custom-indicator2

reproduce:

• npx create-react-app my-app --template typescript
• install react-router-dom
• install antd
• install ant-design/charts
• use the example in react.component:

npm: 8.5.0 node: v16.14.2

code:

import React from "react";
import { Gauge, G2 } from '@ant-design/plots';
const { registerShape, Util } = G2;

registerShape('point', 'rpm-gauge', {
    draw(cfg, container) {
        const { indicator, defaultColor } = cfg.customInfo;
        const { pointer, pin } = indicator;
        const group = container.addGroup();

        const center = this.parsePoint({
            x: 0,
            y: 0,
        }); // 绘制指针

        if (pointer) {
            const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
            const radius = this.coordinate.getRadius();
            const midAngle = (startAngle + endAngle) / 2;
            const { x: x1, y: y1 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle + 1 / Math.PI);
            const { x: x2, y: y2 } = Util.polarToCartesian(center.x, center.y, radius / 15, midAngle - 1 / Math.PI);
            const { x, y } = Util.polarToCartesian(center.x, center.y, radius * 0.65, midAngle);
            const { x: x0, y: y0 } = Util.polarToCartesian(center.x, center.y, radius * 0.1, midAngle + Math.PI);
            const path = [['M', x0, y0], ['L', x1, y1], ['L', x, y], ['L', x2, y2], ['Z']]; // pointer

            group.addShape('path', {
                name: 'pointer',
                attrs: {
                    path,
                    fill: defaultColor,
                    ...pointer.style,
                },
            });
        }

        if (pin) {
            const pinStyle = pin.style || {};
            const { lineWidth = 2, fill = defaultColor, stroke = defaultColor } = pinStyle;
            const r = 6;
            group.addShape('circle', {
                name: 'pin-outer',
                attrs: {
                    x: center.x,
                    y: center.y,
                    ...pin.style,
                    fill: 'transparent',
                    r: r * 1.5,
                    lineWidth,
                    stroke: stroke,
                },
            });
            group.addShape('circle', {
                name: 'pin-inner',
                attrs: {
                    x: center.x,
                    y: center.y,
                    r,
                    stroke: 'transparent',
                    fill,
                },
            });
        }

        return group;
    },
});

export function Main() {
    return <PageMain />;
}


class PageMain extends React.Component<any, any> {
    config = {
        percent: 0.78,
        range: {
            color: '#30BF78',
        },
        indicator: {
            shape: 'rpm-gauge',
            pointer: {
                style: {
                    stroke: '#D0D0D0',
                    lineWidth: 1,
                    fill: '#D0D0D0',
                },
            },
            pin: {
                style: {
                    lineWidth: 2,
                    stroke: '#D0D0D0',
                    fill: '#D0D0D0',
                },
            },
        },
    };

    render() {
        return <div>
            <Gauge {...this.config} />;
        </div>
    }
}```

[DjVreditel]

There a lot of problems in the types inside of @antv/g2 library. If you will import Shape Interface directly from this library you will get thousand of errors. So i found how we can resolve this issue.

1. Create Shape type:

type Shape = ReturnType<typeof G2['registerShape']>;

2. Replace:

this.parsePoint
this.coordinate

with

(this as Shape).parsePoint
(this as Shape).coordinate