Vue.js + TypeScript如何声明Props类型？解决log类型未知警告

问题出在你只声明了logs是数组，但未指定数组元素的具体类型，TypeScript无法推断log的结构，因此将其标记为unknown。你需要明确定义日志对象的类型，并将logs声明为该类型的数组，具体实现如下：

1. 定义Log接口，匹配你的日志对象结构：

interface Log {
  timestamp: string;
  logType: string;
  logMessage: string;
}

2. 在defineProps中指定logs的类型，有两种常用写法：

写法一：使用defineProps泛型（推荐，符合Vue3组合式API的TS风格） #

const props = defineProps<{
  logs: Log[];
}>()

写法二：保留选项式验证，结合PropType #

如果需要保留required这类属性验证逻辑，可以引入Vue的PropType做类型断言：

import type { PropType } from 'vue';

// 先定义Log接口（同上）

defineProps({
  logs: {
    type: Array as PropType<Log[]>,
    required: true
  }
})

修改完成后，TypeScript就能正确推断v-for中log的类型，'log' is of type 'unknown'的警告会自动消失。

内容的提问来源于stack exchange，提问作者Divya Bharathi