vue3 ts 求和

Vue3 中使用 TypeScript 来求和通常涉及数据绑定、计算属性（Computed Property）以及类型提示。假设你有一个数组，你想对这个数组中的数值进行求和，你可以这样做：

<template>
  <div>
    <p>总和：{{ total }}</p>
  </div>
</template>

<script lang="ts">
import { computed } from 'vue';

export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5] as number[], // 声明一个数字类型的数组
    };
  },
  computed: {
    total: computed(() => {
      // 使用 TypeScript 的数组索引来安全地遍历并求和
      return this.numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    }),
  },
};
</script>

在这个例子中，`total` 是一个计算属性，它使用了 `reduce()` 方法来累加数组中的元素。TypeScript 的类型系统确保了数组操作的安全性和类型一致性。