fix(pattern): remove non-required properties from PatternObject and fix some type issues.

[plainheart]

fixes apache/echarts#14953

1. make type, svgElement, svgWidth, svgHeight of PatternObject optional.
2. fixed some type issues.

[pissang]

Is it better to use union of interface so we can have type narrowing?

interface CanvasPatternObject {
  type: 'pattern'
  image: ImageLike | string
  repeat: ...
}
interface SVGPattenObject  {
  type: 'pattern'
  svgElement?: SVGElement
  ....
}

type PatternObject = CanvasPatternObject | SVGPatternObject

[plainheart]

I'm not sure which way is better,

1. Use union types (you mentioned above)
2. Define a parent type named PatternObject, CanvasPatternObject and SVGPatternObject extend it.

GradientObject is like the second way, but one comment is here that states you are also not sure about this.

// TODO Should GradientObject been LinearGradientObject | RadialGradientObject

[pissang]

Union types provide a more precise type checking for the developers. It's usually better when the subtypes are enumerable.

For Gradient I now prefer the interface to be:

export interface GradientObjectBase {
    id?: number
    type: string
    colorStops: GradientColorStop[]
    global: boolean
}

export interface LinearGradientObject extends GradientObjectBase { };
export interface RadiaGradientObject extends GradientObjectBase { };
export type GradientObject = LinearGradientObject | RadiaGradientObject;

So the type system can know it is a radial gradient is immediately developers add a property r.

// TypeScript can narrow the type of right-hand object to RadiaGradientObject because it has property `r`.
// It will throw type error when we add properties that belongs to LinearGradientObject like `x2`
const gradient: GradientObject = { r: xxxx }

[pissang]

Sorry for the confusing name CanvasPatterObject. The difference between these two pattern object is whether to use an image in the pattern or use an SVG element. Both of them are supported in SVG renderer.

zrender/src/svg/helper/PatternManager.ts

Line 139 in d30bcf7

const prevImage = patternDom.getElementsByTagName('image');

So perhaps using ImagePatternObject and SVGPatternObject is clearer.

[plainheart]

Not sure if 3c2fb9a understands what you mean.

[pissang]

And SVGPatternObject should not have image property.