vue3+ts:shims-vue.d.ts

news2024/11/17 4:48:46

一、本文引子

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

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

二、typescript类型断言

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/655157.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【备战秋招】每日一题:4月23日美团春招第一题:题面+题目思路 + C++/python/js/Go/java带注释

为了更好的阅读体检&#xff0c;为了更好的阅读体检&#xff0c;&#xff0c;可以查看我的算法学习博客第一题-申请奖学金 在线评测链接:P1245 题目内容 塔子哥是一个热爱学习的大学生&#xff0c;他的梦想是成为一名优秀的算法竞赛高手。为了实现自己的梦想&#xff0c;他需…

代理ip匿名原理及那些行业需要代理ip

互联网的高速发展&#xff0c;连带了代理ip也受到了更多人的使用&#xff0c;不同的行业都存在使用代理ip的情况&#xff0c;同时代理ip也以为匿名程度分成了高匿、普匿、透明代理&#xff0c;那么代理ip匿名的原理是什么呢&#xff1f;又有哪些行业需要代理ip呢&#xff1f;下…

flume环境配置-传输Hadoop日志(namenode或datanode日志)

解压文件 修改文件名 配置环境变量 执行flume-ng version 将flume-env.sh.template改名为flume-env.sh&#xff0c; 并修改其配置 启动Flume传输Hadoop日志 启动flume 解压文件 tar -zxvf apache-flume-1.9.0-bin.tar.gz -C /opt 修改文件名 mv apache-flume-1.9.0-b…

全面安全防护,加速企业创新发展——亚马逊云科技re:Inforce全球大会

亚马逊云科技re:Inforce 2023全球大会于当地时间2023年6月13日在美国加州安纳海姆拉开帷幕。在大会上&#xff0c;亚马逊云科技宣布推出十多项安全新服务及功能&#xff0c;下面就来一览本次大会的风采。 “Security is our top priority.” “安全是我们的首要优先级”&#…

Java 面向对象 | 详细知识图谱式讲解

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; ☢Java入门 基础知识&#xff1a;了解 Java 基本语法、面向对象编程&#xff08;OOP&#xff09;概念、流程控制语句、数据类型、方法等基础知识。可以通过 Java 编程…

Nodejs七、身份认证

零、文章目录 Nodejs七、身份认证 1、Web 开发模式 &#xff08;1&#xff09;目前主流的 Web 开发模式 基于服务端渲染的传统 Web 开发模式基于前后端分离的新型 Web 开发模式 &#xff08;2&#xff09;服务端渲染的 Web 开发模式 服务器发送给客户端的 HTML 页面&…

HBase Shell操作HBase进行预分区

本文将介绍如何使用HBase Shell操作HBase进行预分区。预分区是指在创建表的时候&#xff0c;指定表的初始分区点&#xff0c;从而使表的数据能够均匀地分布在多个RegionServer上&#xff0c;提高读写性能和负载均衡。本文将使用HBase Shell命令&#xff0c;创建不同的预分区表&…

Allure在自动化测试中的应用

目录 前言&#xff1a; 01Allure的简介及使用 1、应用场景 02Allure与Pytest结合 1、添加测试步骤 2、添加主要功能模块描述 3、添加严重等级 03Allure集成Jenkins 1、Jenkins介绍和安装 2、Jenkins安装allure插件 前言&#xff1a; Allure是一种流行的测试报告框架…

Floating UI 使用经验分享 - Dialog

上文&#xff1a;Floating UI 使用经验分享 - Popover 在本文中&#xff0c;我将分享如何使用 Floating UI 来创建另一种常见的浮动 UI 组件——Dialog&#xff08;对话框&#xff09;。Dialog 是一个浮动元素&#xff0c;显示需要立即关注的信息&#xff0c;他会出现在页面内…

5G NR基于码本的上行传输

上行传输受基站DCI调度&#xff0c;UE收到DCI信息后&#xff0c;根据PMI信息选择相应的码本。 在3GPP TS 38.211 6.3.1.5节中&#xff0c;定义了不同天线端口数和不同传输层数情况下的可选码本。下面截取了单层2天线端口码本和双层两天线端口码本。 gNB在什么情况下为UE选择什…

Python--序列

Python--序列 <font colorblue>一、定义<font colorblue>二、索引<font colorblue>1.从左往右的索引&#xff1a;索引值从0开始递增<font colorblue>2.从右往左的索引&#xff1a;从-1开始递减 <font colorblue>三、切片<font colorblue>四…

Unity3d_Cut\Clipping sphere\CSG(boolean)(裁剪模型重合部分)总结

1、https://liu-if-else.github.io/stencil-buffers-uses-in-unity3d/ 下载&#xff1a;https://github.com/liu-if-else/UnityStencilBufferUses 2、手动切割 Unity 模型切割工具,CSG,任意图案,任意切割_unity csg_唐沢的博客-CSDN博客 3、 Shader Unity Shader学习&#x…

【从删库到跑路】详细讲解MySQL的函数和约束作用

&#x1f38a;专栏【MySQL】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 文章目录 &#x1f354;函数⭐字符串函数&#x1f388;字符串拼接函数&…

Python基础知识 数据容器

id() 函数是python 内置函数 返回 id() 函数返回对象的唯一标识符&#xff0c;标识符是一个整数。 a, b, c 20, 30 , 40 print(a,b,c) ## a20 b 30 c40 ## 跟ES6系列中的析构函数原理一样Python中 字符串不能通过 &#xff0c;把 数字等非字符串&#xff0c;进行拼接…

Redis从入门到精通【高阶篇】之底层数据结构链表包(listpacks)详解

文章目录 0.前言2. listpacks&#xff08;紧凑列表&#xff09;2. 源码解析3. 总结 0.前言 上个篇章回顾&#xff0c;我们上个章节我们学习了《Redis从入门到精通【高阶篇】之底层数据结构字典(Dictionary)详解》 本文将Redis底层数据结构 listpacks&#xff08;链表包&#…

SynchronousQueue的基本介绍

SynchronousQueue介绍 SynchronousQueue作为阻塞队列&#xff0c;区别于其他的阻塞队列。因为他不存储元素&#xff0c;但是存储消费者或者生产者。要是SynchronousQueue队列中存储了一个生产者&#xff0c;再来一个生产者想存放到队列中&#xff0c;要是你使用的是put方法&…

chatgpt赋能python:Python自动编号教程:如何给数据添加自动编号

Python自动编号教程&#xff1a;如何给数据添加自动编号 在进行数据处理和整理过程中&#xff0c;有时候需要为数据添加自动编号才能更好地进行分析和展示。而使用Python编程语言可以快速而准确地实现自动编号的功能。在本篇教程中&#xff0c;我们将介绍如何使用Python处理数…

网络层:IPv4数据报的首部格式

1.IPv4数据报的首部格式 笔记来源&#xff1a; 湖科大教书匠&#xff1a;IPv4数据报的首部格式 声明&#xff1a;该学习笔记来自湖科大教书匠&#xff0c;笔记仅做学习参考 下图来源&#xff1a;以太网MAC帧格式 IP数据报属于MAC帧的数据部分 IPv4数据报的首部格式 1.1 IP数…

VS2019编译GSL

VS2019 编译GSL 下载GSL&#xff1a;https://github.com/BrianGladman/gsl&#xff0c;此仓库带有用于编译的VS解决方案。 解压后&#xff0c;在 build.vc 目录下有两个解决方案&#xff1a; gsl.dll.sln 用于编译生成动态库gsl.lib.sln 用于编译生成静态库 请先阅读 build…

haproxy服务器对nginx服务器web服务调度负载均衡、用nfs做共享目录(脚本部署)

目录 一、准备 二、在作为haproxy的服务器上导入以下shell执行haproxy安装 三、由于nginx服务需要用的nfs共享目录&#xff0c;先部署nfs 四、nginx服务器1部署 五、nginx服务器2部署同上 六、测试 一、准备 四台服务器 系统IP搭建服务器centos7192.168.1.12haproxycent…