vue3 ts interface 定义数组

在Vue3中使用TypeScript定义数组的方式有多种，其中一种是使用接口（interface）来定义数组元素的类型。下面是一个示例代码：

interface Book {
  name: string;
  bookType: string;
  grade: number;
}

const books: Book[] = [
  { name: '三体1', bookType: '科幻', grade: 9.1 },
  { name: '三体2', bookType: '科幻', grade: 9.2 },
  { name: '三体3', bookType: '科幻', grade: 9.3 },
];

console.log(books[0].name); // 输出：三体1

在上面的代码中，我们定义了一个名为Book的接口，它包含了三个属性：name、bookType和grade。然后我们使用Book[]来定义一个Book类型的数组books，并初始化了三个元素。最后我们输出了books数组中第一个元素的name属性。

相关问题

vue+ts怎么判断数组的数据并筛选

在 Vue 中使用 TypeScript 判断数组的数据并筛选，可以使用数组的 filter 方法。

举个例子，假设有一个数组 arr，我们想要筛选出其中 age 大于 18 的元素，可以这样写：

interface Person {
  name: string;
  age: number;
}

const arr: Person[] = [
  { name: '张三', age: 20 },
  { name: '李四', age: 16 },
  { name: '王五', age: 25 },
];

const result = arr.filter((item) => item.age > 18);
console.log(result); // 输出 [{ name: '张三', age: 20 }, { name: '王五', age: 25 }]

在这个例子中，我们使用了 TypeScript 的 interface 定义了 Person 类型，然后定义了一个数组 arr，其中每个元素都是 Person 类型的对象。

接着，我们使用数组的 filter 方法，传入一个回调函数作为参数，该回调函数的参数 item 为数组中的每个元素，返回值为布尔类型，用于判断该元素是否应该保留在筛选结果中。

最后，我们将筛选结果输出到控制台中。

希望对你有所帮助！

vue3 computed的ts数组

在Vue 3中，computed属性可以使用TypeScript来定义返回值类型。当computed属性返回一个数组时，你可以使用以下方式来定义其类型：

import { computed, Ref } from 'vue';

interface Item {
  id: number;
  name: string;
}

// 定义一个ref类型的数组
const items: Ref<Item[]> = computed(() => {
  // 在这里计算和返回数组
  return [
    { id: 1, name: 'item 1' },
    { id: 2, name: 'item 2' },
    { id: 3, name: 'item 3' },
  ];
});

在上面的例子中，我们使用`Ref<Item[]>`来定义`items`变量的类型，表示它是一个包含`Item`对象的数组。在computed函数中，我们可以进行计算并返回这个数组。