chore: make some improvement (#8255)

* chore: make some improvement

* chore: upd

src/circle/index.tsx

@@ -1,4 +1,4 @@
-import { watch, computed, PropType } from 'vue';
+import { watch, computed, PropType, CSSProperties } from 'vue';
 import { raf, cancelRaf } from '@vant/use';
 import { isObject, getSizeStyle, createNamespace } from '../utils';
 
@@ -62,7 +62,8 @@ export default createComponent({
     watch(
       () => props.rate,
       (rate) => {
-        let rafId;
+        let rafId: number | undefined;
+
         const startTime = Date.now();
         const startRate = props.currentRate;
         const endRate = format(rate);
@@ -97,11 +98,11 @@ export default createComponent({
     const renderHover = () => {
       const PERIMETER = 3140;
       const { strokeWidth, currentRate, strokeLinecap } = props;
-      let { color } = props;
       const offset = (PERIMETER * currentRate) / 100;
-      color = isObject(color) ? `url(#${id})` : color;
-      const style = {
-        stroke: `${color}`,
+      const color = isObject(props.color) ? `url(#${id})` : props.color;
+
+      const style: CSSProperties = {
+        stroke: color,
         strokeWidth: `${+strokeWidth + 1}px`,
         strokeLinecap,
         strokeDasharray: `${offset}px ${PERIMETER}px`,

src/circle/test/__snapshots__/demo.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-            style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
+            style="stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
             class="van-circle__hover"
       >
       </path>
@@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
       </path>
       <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-            style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
+            style="stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
             class="van-circle__hover"
       >
       </path>

src/circle/test/__snapshots__/index.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`should change stroke linecap when using stroke-linecap prop 1`] = `
     >
     </path>
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-          style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
+          style="stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
           class="van-circle__hover"
     >
     </path>