vue3+ts:shims-vue.d.ts

这篇具有很好参考价值的文章主要介绍了vue3+ts:shims-vue.d.ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、本文引子

uniapp(3.8.4.20230531)+ vue3 + ts + vite 项目

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

vue3+ts:shims-vue.d.ts

vue3+ts:shims-vue.d.ts

二、typescript类型断言

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

vue3+ts:shims-vue.d.ts

有时候你会比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博客

TypeScript:熟练掌握TypeScript_snow@li的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-496677.html

到了这里,关于vue3+ts:shims-vue.d.ts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+TS版本Uniapp:封装uni.request请求配置

    作者: 前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 uniapp 的封装逻辑不同于 Vue3 项目中直接使用 axios.create() 方法创建实例(在 create 方法中写入请求的地址、请求头、超时等内容),代码如下: PS:上述代码来自博主在B站的

    2024年04月22日
    浏览(34)
  • uniapp vue3版本+ts使用 vant小程序 组件库

    1.首先从uniapp官网下载vue3版本+ts的模板 2.安装vant微信小程序版本 3.在项目src目录创建wxcomponents文件夹,在wxcomponents文件夹下创建vant文件夹 4.从node_modules文件夹下的@vant文件夹里面的weapp,weapp下的dist文件夹,将dist文件夹里面的文件复制到/wxcomponents/vant 5.全局引用   在 pages

    2024年02月13日
    浏览(55)
  • 微信小程序uniapp+vue3+ts+pinia的环境搭建

    一.创建uniapp项目 通过vue-cli创建 二.安装依赖: 1.pnpm i 2.运行项目: 将package.json的 3.导入微信小程序开发工具 打开微信开发者工具, 导入 distdevmp-weixin 运行 三. TS 类型校验 在tsconfig.json文件中\\\"compilerOptions\\\"配置项内添加\\\"ignoreDeprecations\\\": “5.0” 额外配置Ts类型校验: 安装类型

    2024年04月10日
    浏览(67)
  • uniapp微信小程序使用axios(vue3+axios+ts版)

    \\\"vue\\\": \\\"^3.2.45\\\",  \\\"axios\\\": \\\"^1.4.0\\\",  \\\"axios-miniprogram-adapter\\\": \\\"^0.3.5\\\", yarn add axios axios-miniprogram-adapter 在 utils 创建 utils/request.ts 文件 在 src 目录下创建 src/api/config 文件夹 config文件夹中创建home.ts文件,首页的接口都放在里面统一管理  和 config 文件夹同级创建home.ts文件,统一管理请求

    2024年02月16日
    浏览(63)
  • 使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

    uni-create-view :用于快速创建 uni-app 页面 uni-helper uni-app :代码提示 uniapp 小程序扩展 :鼠标悬停查文档 1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types. 2.添加vueCompilerOptions选项 ①在VS Code中找到设置 ②在设置中搜索文件关联 ③添加这两个文件名,值为

    2024年04月27日
    浏览(63)
  • uniapp----微信小程序 日历组件(周日历&& 月日历)【Vue3+ts+uView】

    用Vue3+ts+uView来编写日历组件; 存在周日历和月日历两种显示方式; 高亮显示当天日期,红点渲染有数据的日期,点击显示数据 1. calendar-week-mouth组件代码 2. 在页面引用组件

    2024年02月04日
    浏览(63)
  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

    首先要知道eslint与prettier的区别,ESLint 是一个用于检测 JavaScript 代码中的错误和潜在问题的工具。它只关注你写的代码是否正确,不会管你代码的格式;Prettier 则是一个代码格式化工具,它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则,在

    2024年03月16日
    浏览(66)
  • uniapp导入echarts类库 开发图表类小程序vue3+ts+vite

    微信小程序和抖音小程序等都支持: 使用步骤如下 第一步:下载插件包 下载echarts插件包,并导入到项目中,然后使用插件中的组件创建容器,并导入数据就可以了。 echarts插件包地址:echarts - DCloud 插件市场 如果你是使用hbuilder写的,可以直接导入,如果你是vscode写的,就

    2024年01月21日
    浏览(45)
  • uniapp--- 微信小程序 用户隐私新规相关代码调整【vue3+ts+uView框架】

    官方公告地址:https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801 用户隐私保护指引填写说明地址:https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/ 1) 需要在9月15前更新完毕,否则会无法使用获取手机号 手机相册等相关信息。 2) 微信小程序开发工具

    2024年02月09日
    浏览(50)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包