首页 > 其他分享 >前端开发中Vue3+Typescript使用装饰器出现错误一则

前端开发中Vue3+Typescript使用装饰器出现错误一则

时间:2024-04-01 16:15:47浏览次数:23  
标签:选项 Typescript target 前端开发 装饰 json Vue3 compilerOptions tsconfig

今天开发公司项目时,使用TS装饰器遇到一个问题。
当我写完装饰器代码后进入网页,控制台提示

SyntaxError: Invalid or unexpected token

image
两个小时后的排查后发现是 tsconfig.json 的配置问题。
如果 tsconfig.json 文件中没有指定 target 选项,TypeScript 编译器会默认使用 es5 作为目标。
修改 tsconfig.json 中 compilerOptions 中的 target 的值为 “ES6”,问题解决。

再次排查反复控制变量作对比发现问题并不出在 compilerOptions 的 target 选项上
问题出现在 tsconfig.app.json 的 compilerOptions 缺少以下两个选项

{
	//...
	"compilerOptions": {
		// ...
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true
	}
}

补充上这两个选项后,页面恢复正常。

标签:选项,Typescript,target,前端开发,装饰,json,Vue3,compilerOptions,tsconfig
From: https://www.cnblogs.com/seal-sill/p/18108689

相关文章

  • vue3中任意嵌套组件传参,provide与inject
    一般父组件向子组件传值,可以通过props (defineProps).但是多级嵌套组件使用props过于麻烦,推荐可以透传的provide和inject provide提供数据   inject注入数据App.vue代码<scriptsetup>import{ref,provide}from'vue'importSonfrom"./son.vue";constgreet......
  • 【Vue3】readonly和shallowReadonly
    readonly()​接受一个对象(不论是响应式还是普通的)或是一个ref,返回一个原值的只读代理。类型functionreadonly<Textendsobject>(target:T):DeepReadonly<UnwrapNestedRefs<T>>只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的ref解包行为与r......
  • 【Vue3】toRaw和markRow
    toRaw作用用于获取一个响应式对象的原始对象,toRaw返回的对象不再是响应式的,不会触发视图更新。toRaw()可以返回由reactive()、readonly()、shallowReactive()或者shallowReadonly()创建的代理对应的原始对象。注意:这是一个可以用于临时读取而不引起代理访问/跟踪开......
  • 【前端面试3+1】07vue2和vue3的区别、vue3响应原理及为什么使用proxy、vue的生命周期
    一、vue2和vue3的区别1.性能优化:        Vue3在性能方面有很大的提升,主要是通过虚拟DOM的优化和响应式系统的改进实现的。虚拟DOM重构:Vue3中对虚拟DOM进行了重构,使得更新算法更加高效,减少了更新时的开销,提升了性能。静态树提升:Vue3可以通过静态树提升技术......
  • vue3 点击按钮跳转到对应的tab页面
     大家好呀,我又来记录一下啦实现功能:点击”查看“按钮,跳转到对应的tab页面方法:router按钮部分:<el-buttonsize="small"@click="check(scope.row.name)">查看</el-button>对应的方法:check(){this.$router.push({path:'/about'})},router:import......
  • Vite + Vue3 项目的创建 ,启动 ,停止
    第一步:使用命令行创建工程在磁盘的合适位置上,创建一个空目录用于存储多个前端项目用vscode打开该目录在vocode中打开命令行运行如下命令npmcreatevite@latest第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了注意:选择vue+JavaScript选项即可......
  • 前后端问题整理 持续更新 附赠Vite+Vue3+Ts项目配置
    问题整理(Vite,Vue(1-3)|.NET)持续更新目录问题整理(Vite,Vue(1-3)|.NET)持续更新前端@项目配置1.node版本过高问题安装nvm管理node版本2.镜像证书无效问题3.npm版本问题4.npminstall证书过期问题5.yarn命令无法使用问题6.ViteVue项目搭建npmrundev错误nod......
  • 快速上手web前端开发(超详细教程)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言第一步下安装vscode第二步vscode汉化第三步安装前端所需插件1.LiveServer2.JavaScriptCodeSnippets3.HTMLBoilerplate第四步编辑HTML1.建立一个HTML文件夹,在vscode中打开该文件夹......
  • 通过Vite创建Vue3项目
    目录一、下载安装node.js18版本及以上,通过node-v来查看node版本二、换淘宝镜像2.1更换镜像2.2查看镜像是否安装成功:npmconfiggetregistry三、全局安装vite: npminstall-gvite@latest 四、创建项目五、查看是否成功一、下载安装node.js18版本及以上,通过......
  • Vue3+Vite+Axios Request 请求封装(TS版本)最新
    Vue3+Vite+AxiosRequest请求封装(TS版本)http>index.ts请求封装/**@Date:2024-03-3012:37:05*@LastEditors:zhong*@LastEditTime:2024-03-3014:12:52*@FilePath:\app-admin\src\http\index.ts*/importaxios,{AxiosInstance,AxiosRequestCon......