Vue3项目中使用Ts对类型进行限制

最新推荐文章于 2023-09-16 10:55:27 发布
最新推荐文章于 2023-09-16 10:55:27 发布
阅读量705 收藏 2
点赞数 2
分类专栏： vue 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50951790/article/details/129838348
版权

1.近几年vue3+ts的配合越来越多，现在我就来说说，如何在vue项目中使用ts对类型进行限制

首先，创建时必须是一个vue3+ts的项目（这是重点）

 这里的话，我们主要是以RoleView.vue和role.ts来做讲解

我们来看RoleView.vue

此处只展示部分使用代码

 接着我们去看看ts文件里面有什么，于是我打开了types中的role.ts

 到此，我们就完成了一个ts在vue3项目中的简单使用啦

万能守恒定律
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中使用Web Worker多线程（TS风味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
vue+ts对data变量定义变量约束
weixin_51406830的博客
06-09 4383
可以使用接口约束 interface itableData { date: string; name: string; address: number; } interface iData { num: string; count: number; obj: { age: number; name: string; }; tableData: itableData[]; } export default { data(): iData { retu
TypeScript编码收获(九)——限制类型只能为对象的属性名、vue3给props限制ts类型
浪头的博客
09-11 1061
【代码】TypeScript编码收获(九)——限制类型只能为对象的属性名、vue3给props限制ts类型。
vue3_动态组件和插槽
qq_45104829的博客
05-16 801
父组件（在这个组件做动态切换的动作）插槽可以是一个变量名。
【vue3+ts后台管理】项目搭建
Errol's Blog
07-07 2266
Vue3+ts后台管理 项目搭建
TypeScript学习（十）——缩小类型限制范围
浪头的博客
10-17 913
ts校验在发现他们两个值相等时，会将他们的类型置为相同，当他们不同时，且至少有一个类型相同，那么他们的类型限制都会变成他们的之前类型限制的并集。ts在赋值的时候，会去看赋值的右边的值是什么类型从而将值的类型作为右边变量的类型限制（多个值即为联合类型）但是，没有任何类型可以分配给 never（除了 never 本身）。一个变量的类型在程序运行的过程中，后根据程序运行流在类型的子集中根据使用情况不断变换类型限制。js判断时，走否逻辑时的值不一定为布尔值false，以下值也可以是false。
vue-cli3 js项目中引入ts混用typeScript1
08-08
$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo:
VueCli3构建TS项目的方法步骤
10-17
主要介绍了VueCli3构建TS项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何在vue中使用ts的示例代码
08-27
本篇文章主要介绍了如何在vue中使用ts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目引入ts步骤(小结)
10-16
主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vite+ts+vue3 知识点（插槽slot）
微光无限的博客
12-05 253
vite+ts+vue3 知识点（插槽slot）
vue3+ts封装通用组件过程中遇到的“对象的类型为 “unknown“”的TS报错问题
byebukesi的博客
09-13 2786
vue3+ts封装通用组件时，需要传入需要的props，然后使用动态属性来控制组件的渲染。这个过程中最可能会遇到TS的类型校验报错。如果是使用JS，那么封装过程一气呵成，将来类型不对了或者数据为空了都会在控制台报错然后调试，但是TS的特点就是让你在写代码的时候把类型定好。
vue3的插槽匿名插槽、具名插槽、作用域插槽、动态插槽
weixin_39838846的博客
07-25 3130
vue3的插槽匿名插槽、具名插槽、作用域插槽、动态插槽
Vue3和Typescript的项目经验总结
qq_45163356的博客
09-21 944
啊啊啊啊
如何在 vue3+TS 的项目中使用pinia进行模块化状态管理
qq_18816201的博客
07-21 4015
在src下新建目录store，旗下新建文件user.ts。多个模块像user.ts一样创建，使用同理。看到这个画面说明OK。
关于vue3+ts使用别名后无ts类型提示的解决方案
最新发布
qiaozhilian的博客
09-16 817
关于vue3+ts使用别名后无ts类型提示的解决方案
Vue3 TypeScript 实现一个 useRequest
程序员成长指北
05-30 666
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群起因自从 Vue3 更新之后，算是投入了比较大的精力写了一个较为完善的Vue3.2 + Vite2 + Pinia + Naive UI的 B 端模版，在做到网络请求这一块的时候，最初使用的是VueRequest的useRequest，但是因为VueRequest的use...
Vue3通透教程【十三】TS简单类型详解
热门推荐
官方推荐
04-23 1万+
TS简单类型的用法详解
vue3项目引入typescript总结
ysyhl9t的博客
10-09 2083
typescript在开发过程中广泛被应用，在这里总结下项目中ts的应用，包含了tsconfig.json详细配置总结；as const断言的应用；typescript泛型的理解与应用
ts在vue3项目中如何使用
05-31
在Vue3项目中使用TypeScript（以下简称TS）需要进行以下几个步骤： 1. 安装TS 首先需要安装TS，可以通过npm进行安装，命令如下： ``` npm install typescript --save-dev ``` 2. 配置TS 在Vue3项目中，需要在根目录下创建一个`tsconfig.json`文件，用来配置TS。具体的配置可以参考[官方文档](https://www.typescriptlang.org/tsconfig)。 3. 配置webpack 在Vue3项目中，默认使用的是webpack进行打包。因此需要在webpack配置文件中进行相关的配置。具体配置可以参考[Vue3官方文档](https://v3.vuejs.org/guide/typescript-support.html#webpack-configuration)。 4. 编写TS代码 在Vue3项目中，可以使用`.ts`或`.tsx`文件进行编写TS代码，可以在Vue组件中使用TS。具体的语法可以参考[官方文档](https://www.typescriptlang.org/docs)。 注意：在使用TS时，需要注意类型的定义和使用，以及模块的导入和导出等问题。建议先学习TS的基础知识，再进行Vue3项目的开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值