使用@vue/composition-api

vue2中使用'@vue/composition-api'，在组件定义接收参数时，提示 TS2304:Cannot find name 'defineProps'.是怎么回事？
主页面

<template>  
    <view>  
        <cava></cava>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  
<style>  
</style>

子组件

<template>  
  <view  
    class="circular-container"  
    :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"  
  >  
    <!-- 背景 canvas -->  
    <canvas  
      v-if="isBgShow"  
      class="circular-bg"  
      :canvas-id="bgCanvasId"  
      :id="bgCanvasId"  
      :width="boxWidth"  
      :height="realCanvasHeight"  
      :style="{ width: boxWidth + 'px', height: realCanvasHeight + 'px' }"  
    ></canvas>  

    <!-- 前景 canvas -->  
    <canvas  
      class="circular-progress"  
      :canvas-id="canvasId"  
      :id="canvasId"  
      :width="boxWidth"  
      :height="realCanvasHeight"  
      :style="{ width: boxWidth + 'px', height: realCanvasHeight + 'px' }"  
    ></canvas>  

    <!-- 居中显示文本 -->  
    <view  
      class="center-label"  
      :style="{ width: boxWidth + 'px', height: realCanvasHeight + 'px' }"  
    >  
      <text class="title">{{ title }}</text>  
      <text class="percent">{{ formattedPercent }}%</text>  
    </view>  
  </view>  
</template>  

<script lang="ts" setup>  
import { ref, watch, onMounted, computed, getCurrentInstance } from '@vue/composition-api'  

const props = defineProps({  
  boxWidth: { type: Number, default: 200 },  
  boxHeight: { type: Number, default: 120 },  
  lineWidth: { type: Number, default: 8 },  
  isBgShow: { type: Boolean, default: true },  
  bgColor: { type: String, default: '#c1d1ea' },  
  type: {  
    type: String as () => 'circular' | 'halfCircular',  
    default: 'halfCircular'  
  },  
  percent: { type: Number, default: 0 },  
  title: { type: String, default: '' },  
  progressColor: { type: String, default: '#3FC987' },  
  gradualColor: { type: String, default: '' }  
})  

const instance = getCurrentInstance()  
const platform = uni.getSystemInfoSync().platform  
const isWeixin = platform === 'wechat' || platform === 'devtools'  

const canvasId = ref('progressCanvas_' + Date.now())  
const bgCanvasId = ref('bgCanvas_' + Date.now())  
const startPercent = ref(0)  
const ctxRef = ref<any>(null)  
const gradientRef = ref<any>(null)  

const realCanvasHeight = computed(() => props.boxHeight)  
const formattedPercent = computed(() => props.percent.toFixed(2))  

watch(() => props.percent, () => draw())  

onMounted(() => {  
  draw(true)  
})  

function draw(init = false) {  
  const start = Math.max(0, Math.min(startPercent.value, Math.floor(props.percent)))  
  if (props.isBgShow && init) drawBackground()  
  drawProgress(start)  
}  

function drawBackground() {  
  const ctx = uni.createCanvasContext(bgCanvasId.value, instance?.proxy)  
  ctx.setLineWidth(props.lineWidth)  
  ctx.setStrokeStyle(props.bgColor)  

  const radius = props.boxWidth / 2  
  const offset = props.lineWidth  
  const startAngle = props.type === 'circular' ? -Math.PI / 2 : -Math.PI  
  const endAngle = props.type === 'circular' ? 1.5 * Math.PI : 0  

  ctx.setLineCap('round')  
  ctx.beginPath()  
  ctx.arc(radius, radius, radius - offset, startAngle, endAngle, false)  
  ctx.stroke()  
  ctx.draw()  
}  

function drawProgress(current: number) {  
  if (!ctxRef.value) {  
    const ctx = uni.createCanvasContext(canvasId.value, instance?.proxy)  
    const gradient = ctx.createLinearGradient(0, 0, props.boxWidth, 0)  
    gradient.addColorStop(0, props.progressColor)  
    if (props.gradualColor) gradient.addColorStop(1, props.gradualColor)  
    ctxRef.value = ctx  
    gradientRef.value = gradient  
  }  

  const ctx = ctxRef.value  
  const gradient = gradientRef.value  
  const radius = props.boxWidth / 2  
  ctx.clearRect(0, 0, props.boxWidth, props.boxHeight)  

  const startAngle = props.type === 'circular' ? -Math.PI / 2 : -Math.PI  
  const arcLength =  
    props.type === 'circular'  
      ? (2 * Math.PI * current) / 100  
      : (Math.PI * current) / 100  

  ctx.setLineWidth(props.lineWidth)  
  ctx.setStrokeStyle(gradient)  
  if (current <= 0) {  
    ctx.setLineCap('butt')  // 不显示小圆点  
  } else {  
    ctx.setLineCap('round')  
  }  
  ctx.beginPath()  
  ctx.arc(radius, radius, radius - props.lineWidth, startAngle, startAngle + arcLength, false)  
  ctx.stroke()  

  if (isWeixin) {  
    ctx.draw(false, () => {  
      if (current < props.percent) {  
        setTimeout(() => {  
          startPercent.value = current + 1  
          drawProgress(startPercent.value)  
        }, 10)  
      } else {  
        startPercent.value = current  
      }  
    })  
  } else {  
    ctx.draw()  
    if (current < props.percent) {  
      setTimeout(() => {  
        startPercent.value = current + 1  
        drawProgress(startPercent.value)  
      }, 10)  
    } else {  
      startPercent.value = current  
    }  
  }  
}  
</script>  

<style lang="scss" scoped>  
.circular-container {  
  position: relative;  
  display: flex;  
  justify-content: center;  
  align-items: center;  

  .circular-bg,  
  .circular-progress {  
    position: absolute;  
    top: 0;  
    left: 0;  
    z-index: 1;  
  }  

  .center-label {  
    position: absolute;  
    top: 24rpx;  
    left: 0;  
    z-index: 2;  
    width: 100%;  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  

    .title {  
      font-size: 22rpx;  
      color: #000;  
    }  

    .percent {  
      font-size: 28rpx;  
      font-weight: bold;  
      color: #000;  
    }  
  }  
}  
</style>