Fix TypeScript error in SVGVEleProps interface - add missing key property

[Copilot]

Problem

The SVGVEleProps interface was missing the key property, causing TypeScript compilation errors when the SvgEle component was used in React map operations.

Error details:

src/svg/svgChart.tsx:212:41 - error TS2322: Type '{ key: string; node: SVGVNode; }' is not assignable to type 'SVGVEleProps'.
  Property 'key' does not exist on type 'SVGVEleProps'.

212       {children?.map((child) => <SvgEle key={child.key} node={child} />)}
                                            ~~~

Solution

Added the optional key?: string property to the SVGVEleProps interface to align with React's requirement for key props in mapped components.

Before:

interface SVGVEleProps {
  node: SVGVNode;
  touchStart?: any;
  touchMove?: any;
  touchEnd?: any;
}

After:

interface SVGVEleProps {
  node: SVGVNode;
  key?: string;
  touchStart?: any;
  touchMove?: any;
  touchEnd?: any;
}

Testing

• ✅ TypeScript compilation now passes without errors (yarn typescript)
• ✅ Build process completes successfully (yarn prepare)
• ✅ No functional changes to component behavior
• ✅ Maintains backwards compatibility

This is a minimal fix that resolves the type definition mismatch while preserving all existing functionality.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.