首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带有Vetur的VSCode中带有Typescript的本机脚本-Vue:带有然后给出属性' then‘的警报在类型'void’上不存在

在带有Vetur的VSCode中使用带有Typescript的本地脚本时,如果在Vue组件中给出属性'then'的警告,提示在类型'void'上不存在,可能是因为以下原因:

  1. 属性命名错误:请确保在Vue组件中正确命名了属性'then',并且没有拼写错误或者大小写错误。
  2. 类型定义问题:如果属性'then'是一个Promise对象的then方法,可能是因为Typescript无法正确推断该属性的类型。可以尝试显式声明属性的类型,例如:
代码语言:txt
复制
props: {
  then: {
    type: Function as PropType<() => void>,
    required: true
  }
}
  1. 缺少类型声明文件:如果使用的是第三方库或自定义的类型,可能需要安装相应的类型声明文件。可以通过在项目中安装相关的@types包来解决,例如:
代码语言:txt
复制
npm install @types/库名
  1. 编译配置问题:如果使用了自定义的编译配置,可能需要检查是否正确配置了Typescript相关的选项。可以查看项目的tsconfig.json文件,确保配置正确。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue 中使用 TypeScript 一些思考(实践)

使用 JavaScript 时,这并没有什么不对地方,但当你使用 TypeScript 时,这有点不足,我们并不能得到有关于 someProp 更多有用信息(比如它含有某些属性),甚至 TypeScript...这意味着我们可以使用 someProp 任意属性(存在或者是不存在)都可以通过编译。为了防止此种情况发生,我们将会给 Prop 添加类型注释。...一些其它 做为 Vue 中最正统方法(与标准形式最为接近),Vue.extends() 有着自己优势, VScode Vetur 插件辅助下,它能正确提示子组件 Props: ?...导入 .vue 时,为什么会报错? 当你 Vue 中使用 TypeScript 时,所遇到第一个问题即是 ts 文件找不到 .vue 文件,即使你所写路径并没有问题: ?...当我尝试 .vue 文件中导入已存在或者不存在 .vue 文件时,却得到不同结果: 文件不存在时: ? 文件存在时: ? 文件不存在时,引用 Vue 声明文件。

3.3K30
  • VSCode

    正文 本文针对开发工具是vscode, 配合vue-cli创建项目,告诉你安装什么插件,每个插件作用,每行配置代码作用 一、插件 网上搜索vscode插件文章,动辄十几个,其实根本用不了那么多...作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查 Eslint 如果你想你(团队)代码风格所有地方看起来都像是同一个人写,就靠它咯 作用:检查你js、html...vue文件里,按下鼠标右键,菜单里你会发现有个格式化文件按钮,我们点击它,你会发现,本来图A好好代码格式化后变成了图B,由于不符合standard规范,就报错了: 图A: [图片上传失败...: "vetur.format.defaultFormatter.js": "vscode-typescript", 再试一次格式化,发现问题解决了,不过还是报错: [图片上传失败…(image-5562e8...": "prettier", "vetur.format.defaultFormatter.js": "vscode-typescript", "javascript.format.insertSpaceBeforeFunctionParenthesis

    1.6K50

    2023 最新最全 VSCode 插件推荐!

    可以使用 VSCode React Refactor 快速重构代码,它会将 JSX 代码片段提取到新类、组件。此外,它还支持 TypeScript、TSX、常规函数、类和箭头函数。...随着 Vue 3 + TypeScript 越来越流行,VeturVue 官方 VS Code 扩展)开始出现问题,例如,将 VueTypeScript 一起使用时 CPU 使用率过高,或者不支持...而 Volar 就解决了 Vetur 问题,并为 Vue 3 + TypeScript 用户提供了最佳开发体验。...该插件允许不同模拟器或仿真器轻松运行和调试代码,从命令面板快速运行 react-native 命令,而无需终端手动运行命令,并使用 IntelliSense 浏览 React Native 函数...Better comments 该插件对不同类型注释会附加了不同颜色,更加方便区分,帮助我们代码创建更人性化注释。

    2.9K30

    TypeScript Vue 3 上手教程

    react 和 vue 社区也越来越多人开始使用TypeScript。...当然,实际开发如何正确拥抱 TypeScript 也是迁移至 Vue3 一个小痛点,这里就针对 Vue3 和 TypeScript 展开一些交流。 ?...对 props 进行复杂类型验证时候,就直接用 PropType 进行强制转换, data 返回数据也能在不显式定义类型时候推断出大多类型, computed 也只用返回类型计算属性即可,代码清晰...,然后怎么使用类型断言就有很多种选择了,这是 TypeScript 语法糖,本质都是一样。...Vetur vetur 代码检查工具vue代码时候会非常有用,就像构建 vue 项目少不了 vue-cli 一样,vetur 提供了 vscode 插件支持,赶着升级 vue3 这一波工作,顺带也把

    3.5K20

    Vscode】 前端项目文件自动格式化(.Vue,.js)

    1.引言 开发vue项目,大家有没有遇到如下情况: 1.1 注释不对 vue文件,template中注释Ctrl+/代码 //<slot name="left" :itemLeft="itemLeft...我们配置需要达到<em>的</em>目标 编辑<em>vue</em>,js 保存 自动格式化 JavaScript<em>中</em>,双引号自动改单引号,分号自动去掉 <em>vue</em>,模板中标签<em>属性</em>换行 2.安装插件 2.1 Prettier 它通过解析代码并使用自己<em>的</em>规则重新打印它...如今,它已成为解决所有代码格式问题<em>的</em>优选方案;支持 JavaScript、 Flow、 <em>TypeScript</em>、 CSS、 SCSS、 Less、 JSX、 <em>Vue</em>、 GraphQL、 JSON、 Markdown...更详尽<em>的</em>参考ESlint中文网 2.3 <em>Vetur</em> <em>vscode</em>下一款优秀<em>的</em><em>vue</em>开发插件,具有如下特征 语法高亮 Snippet Emmet 错误检测 格式化 智能感知 ......<em>中</em>html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vuejs按编辑器自带ts格式进行格式化 "vetur.format.defaultFormatterOptions

    3K10

    作为JavaScript开发人员,这些必备VS Code插件你都用过吗?

    而这些功能,曾经只像Eclipse或者Visual Studio 2017这样完整集成开发环境(IDEs)才有。 VS Code强大无疑来自于它插件市场。...这个插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。...源码:vscode-javascript-booster。 ? 6. 浏览器插件 除非你是在用JavaScript写控制台程序,否则你多半会在浏览器执行你JavaScript代码。...Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好发布GitBook文档。 Ember:为Ember提供了命令行支持和智能提示。...像ESLint这样插件,帮助你避免代码常见错误;Debugger for Chrome,帮助你更容易地调试代码;带有智能提示Node.js插件帮助你正确引用模块;像Live Server和REST

    2.9K10

    前端工程师vscode必备插件(20个)

    setting配置保存时自动格式化代码: “editor.formatOnType”:true, “editor.formatOnSave”: true 如果安装了vetur...引入图片后,旁边可以看到图片预览图。鼠标悬停,点击后可打开该图片所在文件夹。 12.CSS Peek 光标定位在class位置,按F12即可快速定位到改classcss文件位置。...阶段:前端工程师 学会了一些框架,比如vue.js,并且能够上手一些完整小项目 14.Vetur .vue文件中代码高亮。...在用vue-cli搭建项目的时候,因为eslint,多余空格会报错。这样就能快速区分空格。 17. GitLens 多人开发,能够显示这段代码是谁提交写。...这个插件可以自定义vscode背景图片。让人更舒服发开发。但是目前该插件还有些问题,首先是图片需要放到C盘.vscode文件下面,然后是要配置插件样式,使其全屏。

    3.1K40

    顺藤摸瓜:用单元测试读懂 vue3 defineComponent

    Vue 3 Composition API ,采用了 setup() 作为组件入口函数。...结合了 TypeScript 情况下,传统 Vue.extend 等定义方法无法对此类组件给出正确参数类型推断,这就需要引入 defineComponent() 组件包装函数,其 rfc 文档说明为...一些基础类型定义 阅读 defineComponent 函数签名形式之前,为了便于解释,先来看看其关联几个基础类型定义,大致理解其作用即可,毋需深究: 引自 vue 2.x options...,你可以为 props 值提供一个带有验证需求对象,而不是一个字符串数组。...可以接受显式自定义 props 接口或从属性验证对象自动推断 tsx ,element-ui 等全局注册组件依然要用 kebab-case 形式 tsx ,v-model 要用 model

    2.7K20

    Vue学习笔记4-项目开发规范及插件

    Vue 学习笔记 4-项目开发规范及插件 一、安装插件 开发必备: vscode-icons:编辑器图标插件; Vue Language Features (Volar):功能上 volar 和 vetur...是一致,都是针对 vue 插件(可以这样说, volar 是 vue3 配套,veturvue2 配套); DotENV:.env 文件语法高亮; ESLint:件化 javascript...从程序包依赖项清除并删除不必要文件。 2.1.1 配置 yarn autoclean --init 执行玩命令之后,Yarn 就会自动根目录下创建一个.yarnclean文件。...2.2 Editor EditorConfig 官网 EditorConfig 完整配置属性说明表 项目根路径新建文件 .editorconfig 项目中我们最好是使用统一行尾符(建议不管还是 mac.../types"], "incremental": true, // 表达式和声明上有隐含 any类型时报错 "noImplicitAny": false, // 忽略所有的声明文件

    28640

    如何阅读源码 —— 以 Vetur 为例

    它通常接受什么形态运行参数?输出什么形式结果? 生态 —— 优秀框架背后通常都带有一套成熟生态系统,例如 Vue,框架衍生品如何补齐框架本身功能缺失?...探索 main 配置 接着往下看,第三个值得关注是 main 属性 vetur 对应值为: "main": "....、mocha、vscode-test、prettier 那么,从这些信息我们基本可以推断出如下信息: Vetur 使用 Rollup + typescript 等工具执行构建工作,按常理执行 yarn...首先,读者要找到一个匹配自身状态和需求切入点,本质就是将大目标拆解成一系列小目标,将大问题拆解成一系列更具体小问题,然后带着具体问题更聚焦地去看代码。...放在 Vetur 语境下,当时经过第一遍分析之后我基本就掌握了 Vetur 架构、核心流程及 「代码补全」 实现细节,了解到“「所有 LSP 请求最终都会按照代码类型流转到相应」 **modes

    67630

    【万字长文】如何阅读源码 —— 以 Vetur 为例

    它通常接受什么形态运行参数?输出什么形式结果? 生态 —— 优秀框架背后通常都带有一套成熟生态系统,例如 Vue,框架衍生品如何补齐框架本身功能缺失?...探索 main 配置 接着往下看,第三个值得关注是 main 属性 vetur 对应值为: "main": "....、mocha、vscode-test、prettier 那么,从这些信息我们基本可以推断出如下信息: Vetur 使用 Rollup + typescript 等工具执行构建工作,按常理执行 yarn...首先,读者要找到一个匹配自身状态和需求切入点,本质就是将大目标拆解成一系列小目标,将大问题拆解成一系列更具体小问题,然后带着具体问题更聚焦地去看代码。...放在 Vetur 语境下,当时经过第一遍分析之后我基本就掌握了 Vetur 架构、核心流程及 「代码补全」 实现细节,了解到“「所有 LSP 请求最终都会按照代码类型流转到相应」 **modes

    66310

    Vue 3.0 — One Piece 发布

    Vue 3,我们采取了 "编译器信息虚拟DOM "方法:模板编译器执行积极优化,并生成渲染函数代码,提升静态内容,为绑定类型留下运行时提示,最重要是,扁平化模板内动态节点,以降低运行时遍历成本...改进TypeScript集成 Vue 3代码库是用TypeScript编写,自动生成、测试和捆绑类型定义,因此它们总是最新。组成API与类型推理一起工作。...Vetur,我们官方VSCode扩展,现在支持模板表达式和道具类型检查,利用Vue 3改进内部类型。哦,如果你喜欢的话,Vue 3排版完全支持TSX。...我们还实现了一个目前未被记录组件,它允许初始渲染或分支切换时等待嵌套异步依赖(异步组件或带有异步setup()组件)。...对Vetur模板类型推理进一步改进。 目前,Vue 3 和 v3-targeting 项目的文档网站、GitHub 分支和 npm dist 标签将保持 next-denoted 状态。

    1.1K20

    初次Vue项目使用TypeScript,需要做什么

    JavaScript开发中经常遇到错误就是变量或属性不存在,然而这些都是低级错误,而静态类型检查恰好可以弥补这个缺点。什么是静态类型?...配置项说明查看AlloyTeam ESLint 规则 配置 项目的根目录创建.eslintrc.js,然后将以下内容复制到其中: module.exports = { extends: [...如果我们想要在 TypeScript 项目中使用,还需要另外下载 @tyeps/md5,该文件夹index.d.ts可以看到为 md5 定义类型。...是如何识别 *.d.ts TypeScript 项目编译时会全局自动识别 *.d.ts文件,我们需要做就是编写 *.d.ts,然后 TypeScript 会将这些编写类型定义注入到全局提供使用。...为vue实例添加属性/方法 当我们使用this.route或一些原型方法时,typescript无法进行推断,在编译时会报属性route不存在错误,需要为这些全局属性或方法添加全局声明 对shims-vue.d.ts

    6.6K40

    使用 Vue 开发,这 7 个 VS Code 插件万万不可错过!

    Vetur Vetur 支持.vue文件语法高亮显示,除了支持template模板以外,还支持大多数主流前端开发脚本和插件,比如 Sass 和 TypeScript,完整支持高亮语法如下所示:...Vetur 维护得很好,它甚至还提供了对Vue3 Typescript支持。...Vue VSCode Snippets 这个插件基于最新Vue官方语法高亮文件添加了语法高亮,并且依据Vue 2API添加了代码片段。...它非常适合编写快速SFC,Vue指令和快速访问生命周期挂钩之类东西。 Bookmarks 许多VSCode插件只有大型项目时才真正展现出其全部潜力。...Bookmarks 可以让我们代码中标记和命名位置。然后,可以在这些不同书签之间跳转来提高我们开发速度。 为了找到某个特性,我们需要小心翼翼地上下滚动我们文件,这样日子一去不复返了。

    1.7K20

    这些必备VSCode JavaScript插件你都用过吗?

    而这些功能,曾经只像Eclipse或者Visual Studio 2017这样完整集成开发环境(IDEs)才有。 VS Code强大无疑来自于它插件市场。...这个插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。)...Debugger for Chrome(在编辑器打断点,让你轻松地Chrome里调试JavaScript。源码(vscode-chrome-debug。 ) ? 2....Vetur(为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好发布GitBook文档。) Ember(为Ember提供了命令行支持和智能提示。...Code Metrics(这是另一个非常棒插件,计算JavaScript和TypeScript代码复杂度。源码:codemetrics。)

    5.9K10

    ESlint + stylelint + VSCode自动格式化代码(2020)

    PS:自动格式化代码保存时自动触发,目前试了 JS 以及 vue 文件 JS 代码都没问题,html 和 vue html 和 css 无效。...TypeScript TypeScript 如果想要自动格式化,需要在 npm 和 vscode 下载 tsilnt 插件: npm i -D tslint [在这里插入图片描述] 然后再配置好你项目里...扩展 其实还是有办法格式化 vue 文件 html 和 css 代码,利用 vscode 自带格式化,快捷键是 shift + alt + f,假设你当前 vscode 打开是一个 vue 文件...,按下 shift + alt + f 会提示你选择一种格式化规范,如果没提示,那就是已经有默认格式化规范了(一般是 vetur 插件),然后 vue 文件所有代码都会格式化,并且格式化规则还可以自己配置...vetur 格式化 javascript 代码: [在这里插入图片描述] 然后回到刚才 vue 文件,随意打乱代码格式,再按下 shift + alt + f ,会发现 html 和 css 代码已经格式化了

    2.4K50
    领券