Uniapp已有项目添加typescript

最新推荐文章于 2025-02-27 21:01:35 发布

思绪万千133

最新推荐文章于 2025-02-27 21:01:35 发布

阅读量6.9k

点赞数 4

文章标签： html5 javascript vue

本文链接：https://blog.youkuaiyun.com/u013611033/article/details/121535509

版权

这篇博客分享了如何在Vue CLI创建的老项目中添加TypeScript支持，包括解决uni-app字段提示问题、配置tsconfig.js、声明全局类型文件以避免引入资源报错。还讨论了Vue 2和Vue 3中使用TypeScript的差异，建议在Vue 3中使用以获得更好的类型提示和体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯js,么有任何提示,感觉很不爽,希望在老项目上加上ts

cli创建的项目

vue add typescript  使用cli内置的方式,添加ts



//解决uni字段不存在的问题  增强uni的提示
npm i @dcloudio/types @types/uni-app @types/wechat-miniprogram --save-dev

tsconfig.js

 "compilerOptions": {
        
        "types": [
            ...
            "@dcloudio/types",
            "@types/wechat-miniprogram",
            "@types/uni-app"
        ],
 },

全局的命名文件 shims-vue.d.ts 避免图文等文件引入报错

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

如果是vue2,可以下装饰器的包,vue2对ts支持并不好,最大的问题就是this,在methods内方法不是指向methods,而是指向vue实例本身,在使用vuex,this.$store也不能提供给你很好的提示,

所有最好在vue3用ts,vue2的ts真的不好用