vue3+ts：shims-vue.d.ts

男娘i 2024-03-16 19:29 11阅读 0赞

**一、本文引子**

**uniapp（3.8.4.20230531）+ vue3 + ts + vite 项目**

在搭建这个base项目的时候出现红素波浪线如图，代码运行正常，但是看起来很难受，于是各种查找，能找到的资料很少，可能和我提问不够准确也有关系，有人说删除tsconfig.js就可以了，我测试了，结果真的可以，但是这绝不是我想要的，这明显忽略了tsconfig.js这个文件的意义，继续研究吧！

![6a282c9bb08e487a859a5ed173a60859.png][]

![75b499d5f8f64656873e7e717514d968.png][]

**二、typescript类型断言**

1、使用as关键字实现类型断言。  
2、关键字 as 后面的类型是一个更加具体的类型（videoTiem是videoList的子类型）。  
3、通过类型断言 ，类型变得更加具体，这样就可以访问videoItem特有的属性或方法了。

![f3f22c02a5c24f4aba9508606df13584.png][]

有时候你会比TS更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。

想起来这句话于是测试一下，果然有效果，但还是不满意，这也不是我要的

**三、shims-vue.d.ts**

shims-vue.d.ts是一个TypeScript类型定义文件，在使用TypeScript编写Vue.js应用程序时，它有助于编译器识别Vue.js语法并提供类型检查。它为Vue.js中的一些全局变量和函数提供了类型定义，例如Vue构造函数、Vue实例选项等。在没有shims-vue.d.ts文件的情况下，编译器可能会报告错误或警告，因为它无法识别Vue.js的语法。

问题的根本原因找到了，就是这个文件配置的问题，修改后的文件记录如下

// import 'vue' // 必须要引入vue,否则就成了覆盖
    import { StateType } from '@/store/index.d'
    import { InjectionKey } from 'vue'
    import { Store } from 'vuex'
    
    /**
     * 这里为什么用vue，而不用@vue/runtime-core，是因为使用pnpm安装依赖，node_modules中没有@vue/runtime-core，
     * 会导致找不到模块而类型声明失败。
     */
    // declare module '@vue/runtime-core' {
    declare module 'vue' {
        interface ComponentCustomProperties {
            // 这里扩展this.$store，还可以在这里对this添加其他的声明
            $store: Store<StateType>
        }
    }
    
    // 扩展useStore声明
    declare module 'vuex' {
        export function useStore<S = StateType>(injectKey?: InjectionKey<Store<S>> | string): Store<S>
    }
    
    // 扩展mock
    declare module 'mockjs' {
        /** 所有已注册的mock规则  */
        const _mocked: Record<string, any>
    }
    
    export {}

**四、欢迎交流指正，关注我，一起学习。**

**五、参考链接**

[小程序-uniapp：uni-app-base 项目基础配置及使用，开箱可用\_snow@li的博客-CSDN博客][-uniapp_uni-app-base _snow_li_-CSDN]

[TypeScript：熟练掌握TypeScript\_snow@li的博客-CSDN博客][TypeScript_TypeScript_snow_li_-CSDN]

[6a282c9bb08e487a859a5ed173a60859.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6e583b4acc554c289042f356bd228ede.png
[75b499d5f8f64656873e7e717514d968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f7255ce6d057424c9d2c58b1ee4b0928.png
[f3f22c02a5c24f4aba9508606df13584.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/4f791b4870394d0fbdda5f827773ae30.png
[-uniapp_uni-app-base _snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/124716125
[TypeScript_TypeScript_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/125441747