Vue + Typescript - 无效类型

Posted 2023-03-13

【中文标题】Vue + Typescript - 无效类型

【英文标题】：Vue + Typescript - invalid types

【发布时间】：2018-11-08 03:41:19

【问题描述】：

使用 typescript 2.8.3、ts-loader 3.5.0（由于使用 webpack 2）和 vue 2.5.16 尝试在 SFC 中定义组件时出现错误，如下所示：

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend(
     name: 'TestComponent',

     props: 
       options: 
          type: Array,
          default: () => [],
       
     ,

     computed: 
       getOptions() 
          return this.options
       ,
     
  )
</script>

这是错误：

TS2339：“组件选项”、“默认方法”、“默认计算”类型上不存在属性“选项”， 道具定义

这是 tsconfig.json：

  "compilerOptions": 
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "allowJs": true,
    "paths": 
      "test/*": ["test/*"]
    ,
    "lib": ["dom", "es2016"],
    "types": ["node", "jest"]
  ,
  "include": ["resources/assets/js/**/*.ts", "resources/assets/js/**/*.vue"],
  "exclude": ["node_modules"]

有什么想法吗？如果我设置 "noImplicityThis": false 但 VSCode 上的自动完成不正确，则可以正常工作。

【问题讨论】：

options 对象定义缺少一个结束分号

已编辑谢谢，但这不是它不起作用的原因:)

【参考方案1】：

不知何故开始工作。将 tsconfig.json 更改为以下内容：

  "compilerOptions": 
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": true,
    "lib": ["dom", "esnext"],
    "types": ["node", "jest"]
  ,
  "include": ["resources/assets/js/**/*.ts", "resources/assets/js/**/*.vue"],
  "exclude": ["node_modules"]

和 vue.d.ts 到：

declare module '*.vue' 
  import Vue from 'vue'
  export default Vue

也许它对某人有用。