问题:

第一次学习uniapp开发,在借助插件具体设置了tsconfig.json类型限制配置后(如下代码),出现了view、image等标签报错(如下图)

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "ignoreDeprecations": "5.0",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-ui-types",
      "@uni-helper/uni-app-types",
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

 

解决: 

在对插件等各方面检查后发现了问题所在,主要问题是在开发过程中这些标签被认为了是 Vue 组件,所以某些属性并没有出现在相关interface上,所以忽略掉这这些原生内容即可。具体操作如下:

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "ignoreDeprecations": "5.0",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-ui-types",
      "@uni-helper/uni-app-types",
    ]
  },
  //加入配置,将标签视为原始组件
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

所以仅需要对vueCompilerOptions进行相关配置即可。vueCompilerOptions 是一个特殊的配置选项,这允许定制 Vue 的编译器行为。其中的nativeTags 是一个数组,它定义了哪些标签应被视为原生 HTML 标签。这个配置选项只影响 Vue 的编译器行为,不会影响其他 TypeScript 编译选项。

Logo

前往低代码交流专区

更多推荐