vue3 TS 用reative定义和长度不超过的数组

在Vue 3中结合TypeScript (TS)，你可以定义一个具有最大长度限制的数组，并使用TypeScript的特性来增加类型安全。首先，你需要安装`@vue/cli-plugin-typescript`并启用它。

创建一个名为`MyArray`的类型，表示不超过10个元素的数组：

import { Prop, ComputedRef } from '@vue/composition-api';

// 定义一个不超过10个元素的数字数组类型
type LimitedNumberArray = readonly number[] & { length: number };

export default {
  props: {
    arrayLength: {
      type: Number,
      default: 10,
      validator: (value: number) => value <= 10, // 确保长度不超过10
    },
  },
  setup(props) {
    const myArray: ComputedRef<LimitedNumberArray> = ref<LimitedNumberArray>(
      new Array(props.arrayLength).fill(0)
    );

    // 使用 `unref` 来操作原始值，避免 TypeScript 错误
    function addItem() {
      if (props.arrayLength < 10) {
        myArray.value.push(unref(myArray.value[myArray.value.length - 1]) + 1);
      }
    }

    return { myArray, addItem };
  },
}

在这个组件中，`myArray`是一个受约束的计算属性，其类型保证了数组的长度不会超过10。当尝试添加超出长度的元素时，TypeScript会给出编译错误提示。