vue3 typescript 数组map报错

Question

初学 vue3 ，项目中自定义了一个组件 ColumnList ，其中声明了自定义的类型 ColumnProps，在 props 声明了该自定义类型的数组数据，在 setup 中的计算属性中对该数组进行操作时候用到了map ，使用 npm run serve 时在 map 处报错:
Property 'map' does not exitst on type 'unknown'
报错的截图如下

在 github 上的地址是：https://github.com/chanchaw/v...
stackblitz 暂时无法演示，提示如下：

Answer 1

新测无误！

如果你是用的 VSCode，编辑器里没提示语法错误，那基本上是没有问题的。

npm run serve 和编辑器应该是用的同一个 tsconfig.json，所以按理说应该不会有问题。考虑清理一下工作目录（删除不必要的文件，重新 npm install 等），如果还有问题，要看你的工作环境了，比如 TypeScript 是全局还是本地安装，版本是啥……这之类的

---

拿你的代码试了下，改两个地方：

1. tsconfig.json 里，"strict": true,（原来是 false）
2. 代码里 (props.list ?? []).map，因为检查出来 props.list 有可能是 undefined，需要安全处理

另外，.eslintrc.js 内容全部注释掉了，我拿我自己的换过去了的，不知道跟这有没得关系，内容如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/standard",
    "@vue/typescript/recommended"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "quotes": [
      "error",
      "single",
      {
        "avoidEscape": true
      }
    ],
    "indent": [
      "warn",
      2
    ],
    "semi": [
      "warn",
      "always"
    ],
    "space-before-function-paren": [
      "warn",
      {
        "anonymous": "always",
        "named": "never",
        "asyncArrow": "always"
      }
    ]
  }
}

Answer 2

报错很明确了，没有声明props.list的类型。

温馨提示：把代码贴出来更好，用图片不方便复制。或者用在线编辑器分享链接。