vue3+ts ref泛型限定值

最新推荐文章于 2024-05-28 22:22:15 发布
最新推荐文章于 2024-05-28 22:22:15 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： vue3+ts项目中应用 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzb1993/article/details/125905585
版权

 限定text.value的值必须为字符串类型

 let text = ref<string>('')

  ref的<类型>, 用来限定后面括号的类型， 同时限定变量.value的类型

 

闪电松鼠~
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+TS ref的使用
白瑕 的博客
07-17 3550
对ref的用法有点模糊, 整理一下吧.
vue3_04_简单介绍ts的接口、泛型、自定义类型
浪漫韫秋
05-02 659
ts这个东西TMD有什么用处；一共是有三种的；默认暴露：export default分别暴露：export统一暴露这个就是第二种写法的；其实就是数组的另外的一个写法；
vue3第三十五节（TS 之 泛型）
最新发布
weixin_39593730的博客
05-28 460
泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类泛型接口泛型方法。泛型使用来定义类型，中的T，也可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。
React+TS项目中ref怎么去使用
weixin_57156748的博客
12-06 3608
react+ts中如何用ref获取元素
TS中ref reactive computed defineprops defineemits 的类型注解
zyl1229ngm的博客
07-13 1479
在TS中数据类型注解的作用就是限制变量赋值的数据类型并有提示。
ts学习笔记一：基本类型
weixin_43837268的博客
10-24 2555
1、全局方法使用 interface Window { test: string; }
ts 之 变量核数据类型（ 简单数据类型、any、unKnown类型 ）
weixin_47409897的博客
05-11 2138
目录ts 之 变量核数据类型定义ts的类型定义为 Number类型定义为String 类型定义为 Boolean 类型undefined 与 null定义数组定义元组定义枚举any 任意类型void 函数没有返回值 定义函数 （有返回值 与 没有返回值）never 不存在的值类型 用于抛出异常 或者死循环类型推断联合类型ts函数篇函数没有返回值 定义函数 （有返回值 与 没有返回值）形参 与 实参可选参数 （ 就是 可传 可不传 ）默认值 （ 为函数 参数 设置默认值 ）剩余参数 ts 之 变量核数据类型
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3 + ts 基于elementplus 后台管理系统模板.zip
05-13
vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统...
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
TypeScript进阶使用方法结合
m0_68331234的博客
07-10 982
语法：在函数名称的后面添加 (尖括号)，尖括号中指定具体的类型泛型是啥？ 泛型简单来说是类型的变量 是不固定的 不写死为什么要用他？ 在指定函数或者类的时候，如果遇到类型不明确的话就可以使用泛型使用场景？ 泛型约束类，泛型约束接口，泛型定义数组 在函数名称的后面写 (尖括号)，尖括号中添加类型变量 类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定) 类型变量 T，是一种特殊类型的变量，它处理类型而不是值 因为 T是类型，因此可以将其作为函数参数和返回值的类型....
【TS】基础知识一
页面仔的博客
09-21 1203
收集整理一些typescript相关的基础知识点
vue3+ts中ref与reactive指定类型实现示例详解
Free雅轩的博客
07-13 8810
ref 的基础特性ref 约等于 reactive({ value: x })ref() 可以定义时无参数，第一次赋值任意类型，然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} console.log('refa:', refa.value) //6 console.log('rcta:', r
vue3语法糖+ts组件传值
分享互联网的有趣知识~
11-20 3923
vue3+ts的组件传值其实就是组件传值加上了数据类型约束，这里主要介绍vue3的setup语法糖组件传值，以删除功能为例子，父子组件主要用到defineProps和defineEmits来实现组件传值。
Vue_3
2018.
01-23 1797
Vue1 组件2 组件生命周期3 组件化开发4 组件间传参5 路由 1 组件 拥有专属的HTML，CSS和数据的页面独立区域。 优点：便于重用、松散耦合、分工协作 页面由一个个独立的区域组成，封装为组件。即每个页面由多个组件组成 1.创建Vue组件: 1.1先在&amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/template&amp;amp;amp;a
vue3+vite+ts--ref和reactive系列的使用
m0_60893808的博客
05-23 774
toRefs 将响应式对象Proxy 转换为普通对象，每一个元素都变成原始的ref对象。- isRef 检查值是否为一个 ref 对象（isReactive同例）- toRef 为源响应式对象上的某个元素 新创建一个 ref()一、ref和reactive使用泛型的约束。- toRaw 返回原始对象。- 返回对象的响应式的对象。
Vue3 ref全家桶
qq_61398960的博客
09-09 849
配合shallowRef使用，上面说到，shallowRef后其组件内部不具有响应式，但是我们可以使用triggerRef令其强制更新。当使用ref定义复杂类型的时候，他会帮我们调用reactive。在template中使用的时候会自动解包无需.value。整个对象具有相应式，但是其中内部属性不具有响应式。使用ref的时候需要.value。定义ref类型两种方式。另一种使用Ref判断是否为ref对象。trigger:触发。
vue3+ts 泛型的高级运用实例
06-09
在 Vue 3 + TypeScript 中，泛型是一个非常常用的技巧，可以帮助我们编写出更加通用、可复用的代码。下面是一个泛型的高级运用实例： 假设我们有一个表单组件，它的数据模型是一个对象，其中每个属性都有一个对应的输入框，我们可以编写一个 `Form` 组件来实现这个表单。为了让 `Form` 组件更加通用，我们可以使用泛型来实现： ```typescript // 定义表单数据模型的类型 interface FormModel { [key: string]: any } // 定义表单项的类型 interface FormItem<T> { label: string prop: keyof T } // 定义表单组件的 props 类型 interface FormProps<T extends FormModel> { model: T items: Array<FormItem<T>> } // 定义表单组件 export default defineComponent<FormProps<FormModel>>({ name: 'Form', props: { model: Object as PropType<FormModel>, items: Array as PropType<Array<FormItem<FormModel>>> }, setup(props) { const handleSubmit = () => { // 处理表单提交逻辑 } return { handleSubmit } } }) ``` 在上面的代码中，我们定义了一个 `Form` 组件，它接收两个 props：`model` 和 `items`，其中 `model` 是一个泛型类型，它可以是任意一个类似于表单数据模型的对象，`items` 是一个数组，其中每个元素都是一个 `FormItem` 类型的对象，表示一个表单项。在组件中，我们使用 `keyof` 关键字来获取泛型类型 `T` 的所有属性名，然后使用 `Array<FormItem<T>>` 来表示 `items` 的类型，这样就可以在使用组件时传入任意一个数据模型和表单项，从而实现组件的通用性和灵活性。 以上是一个 Vue 3 + TypeScript 中泛型的高级运用实例，通过使用泛型，我们可以编写出更加通用、可复用的组件和方法，从而提高代码的复用性和灵活性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值