Vue3-TS中的接口-泛型-自定义类型

最新推荐文章于 2024-05-28 22:22:15 发布
最新推荐文章于 2024-05-28 22:22:15 发布
阅读量1k 收藏 9
点赞数 16
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42371932/article/details/135495658
版权
本文介绍了在JavaScript开发中如何创建和管理接口类型，包括在src/types文件夹中定义接口、数组形式的使用，以及如何在Reactive编程和React组件中结合泛型进行父子组件之间的数据传递。重点讲解了`exporttype`、`PersonInter`和`defineProps`的用法。
摘要由CSDN通过智能技术生成

1首先一般在src下新建types文件夹，用来存放接口类型

ccd897d3a08c420395b3ac9de197d5e5.png

2定义一个接口，用于限制person对象的具体属性

当需要用这个类型形成数组时，有2种写法

export type Persons = Array<PersonInter>

export type Persons = PersonInter[]

b1f5e3fb360542a8b9edb3df66e097a3.png

3在文件中使用接口，需要先引入

首先需要加上 type 前缀

其次引入了必须使用！

然后在定义的变量后用：type的形式，申明接口

0f04bb12843140da901c7c636e651724.png

4如何结合reactive和泛型

有2种写法

第一种

82f044f4e7634510a6a56f8dc091124f.png

第二种

dab8d438b92c4267aa180191171d6ed8.png

5defineProps和泛型结合使用

<Person a="哈哈” :list="personList"/>  //父亲传给儿子list数据

defineProps<{list:Persons}>()   //儿子接受数据的时候，用泛型加以限制，表示我接受的名为list的数据只接受Persons类型

a8fec16a59ee4bd49c887f1202c3cc02.png

b815d87a5224484b856249d38963e75f.png

 

大嘴史努比
关注
  • 16
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ts+vue3.0 如何用Proxy声明响应式对象
qq_35145095的博客
06-06 389
对象为这个空对象创建了代理，由于第二个参数为空对象，因此将使用 Proxy 的默认行为，这个代理对象目前没有任何行为的自定义操作。在以上代码中，使用了 reactive 函数使整个对象成为响应式，并使用 Proxy 对象来代理对象属性的访问和设置。使用 Proxy 比起使用 Vue 提供的 API 需要实现更多的功能，但是使用 Proxy 可以更明确地表达代码的含义，并且更灵活地控制响应式对象的行为。对象实现响应式时，你可以在对象被访问或修改时执行自定义的操作，这些操作可以很好地控制对象的行为。
project-xczx2-portal-vue-ts.zip
06-04
描述中提到的 "project-xczx2-portal-vue-ts.zip" 与标题一致，表明这个压缩包包含了一个名为 "project-xczx2-portal" 的项目，该项目使用 Vue.js 和 TypeScript 技术栈构建。"portal" 通常指的是一个入口或聚合点，...
【Vue3】解锁Vue3黑科技：探索接口、泛型和自定义类型的前端奇迹
null18的博客
03-02 6263
在Vue3中，我们不仅可以利用其强大的响应式系统和组件化开发来构建灵活的前端应用程序，还可以利用TypeScript(简称TS)的特性来增强代码的可读性、可维护性和类型安全性。在本文中，我们将深入探讨Vue3中接口、泛型和自定义类型的使用，以便更好地利用这些功能来构建优秀的Vue应用在index.ts中定义之后在Person.vue中进行导入即可，同时我们将之前的Array PersonInter修改为我们自定义的Persons就可以了，是不是很方便啊~~~
vue3第三十五节（TS 之 泛型）
最新发布
weixin_39593730的博客
05-28 443
泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类泛型接口泛型方法。泛型使用来定义类型，中的T，也可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。
vue中data需要type定义interface 类型 这是ts要求的
tiankongxiao的博客
02-09 846
interface
Ts的接口、泛型、自定义类型
weixin_68376171的博客
01-24 928
TypeScript（TS）是一种强类型的JavaScript超集，它为JavaScript代码提供了类型检查功能。在TypeScript中，接口（Interfaces）、泛型（Generics）和自定义类型（Custom Types）是定义和强化代码类型的三种重要方式。接口是用来定义对象、类或函数的形状（shape）的一种类型系统。泛型是一种可以在定义函数、接口、类的时候，不预先指定具体的类型，而是在使用的时候再指定类型的特性。自定义类型通常是指那些使用TypeScript提供的类型系统来创建的新类型。
vue3中 使用vue-types
于坤
04-27 607
vue-types在 Vue 3 中的使用主要适用于希望进行更细致的 prop 验证的场景，尤其是在 JavaScript 项目中。对于 TypeScript 用户，Vue 3 的类型系统已经提供了强大的支持，所以直接使用 Vue 的类型功能通常是更加简洁和直接的选择。
vue3-antd-admin.rar
10-25
在`.ts`文件中，你会看到声明类型、接口和泛型等TypeScript特性。 Ant Design Vue（antd）是基于Ant Design设计语言的Vue实现，它提供了一系列高质量的UI组件，如表格、按钮、输入框等。这些组件经过优化，易于使用...
vite-vue-ts精简模版集成pinia+svg+router+@src
03-22
3. **TypeScript**：一种强类型、静态类型的JavaScript超集，增加了诸如接口、泛型和枚举等特性，有助于提高代码质量和可维护性。 4. **Pinia**：Vue.js 3推荐的状态管理库，作为Vuex的替代品，它简化了状态管理，...
vite-vue3-eslint-typescript.zip
11-20
在Vue 3中，可能有`App.vue`主组件、`main.ts`入口文件、`components`目录存放自定义组件等。 综上所述，"vite-vue3-eslint-typescript.zip"提供了一个完整的现代前端开发环境，结合了快速开发工具Vite、下一代Vue...
vue-types:查看道具类型定义
07-24
Vue 类型 Prop 类型定义。 注意：本文档适用于 VueTypes 4。如果您正在寻找旧版本，请参阅v1~v3分支。 介绍 vue-types是 Vue.js 组件的可配置定义的集合，受 React 的prop-types启发。 或在了解更多。 运行示例 安装依赖： npm ci 运行脚本： npm run examples 等待服务器和捆绑器启动 贡献 克隆这个仓库 安装依赖： npm ci 进行更改 在__tests__/更新或添加测试 验证一切正常： npm run lint && npm test 提交拉取请求 执照 版权所有 (c) 2016 - 现在 Marco Solazzi
vue-types-Vue道具类型定义。-Vue.js开发
05-27
vue-types Vue.js的Prop类型定义。 与Vue 1.x和2.x兼容简介使用时间安装随附的NPM软件包CDN eslint-plugin-vue的用法生产版本Webpack汇总文档本机类型本机类型配置自定义类型扩展VueTypes实用程序许可证简介vue-types是受React的prop-type启发的Vue.js组件的可配置prop类型定义的集合。 现在就试试！ 何时使用Whi
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在这个项目中，Vue3的响应式系统和组件模型使得构建用户界面变得更加高效，同时TypeScript（简称ts）的引入增强了代码的类型安全，减少了运行时错误。 TypeScript是JavaScript的一个超集，它添加了静态类型和其他...
vue3_04_简单介绍ts的接口、泛型、自定义类型
浪漫韫秋
05-02 618
ts这个东西TMD有什么用处；一共是有三种的；默认暴露：export default分别暴露：export统一暴露这个就是第二种写法的；其实就是数组的另外的一个写法；
vue3+ts
yangyanqin2545的博客
11-30 411
vue3+ts 1、定义接口 interface User { username：string, age:number, sertUsername(username:string):void, getUsername():string } 实现接口的第一种写法 export default defineCompoenent({ setup() { let user:User = reactive({ username:'张三', age:"20", setUser
vue3项目中typescript如何export引入(imported）的interface
左直拳的马桶_日用桶
01-25 1288
引入接口后，不能原封不动地直接export出去。typescript支持面向对象语言中常见的接口（interface）、类（class）等。但我近几天发现，一个interface，通过import引入后，如果直接再export出去，是不行的。语法没有错，但运行时似乎出问题。比如，我写一个组件timeline，文件结构如下图所示。为规范其他模块调用，我在_type.ts中定义了一个接口，是关于数据类型的。
泛型 【Vue3+ts+hoot.ts】
weixin_68903201的博客
03-02 298
【代码】泛型 【Vue3+ts+hoot.ts】
【基础篇】 如何为 Vue3 组件标注 TS 类型，看这个就够了！
LuckyWinty的博客
04-04 1052
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群1开篇原文作者说是2023年也就是今年，Vue3和TS 是最热门的前端技术，其实去年就已经很火了。2文章开始的地方今天就给大家分享一下如何在 Vue3 组件中结合Composition-Api使用 TS 类型。如果有不会或者不熟的小伙伴，一起学起来吧！3为props标注类型使用 <script setup>当使用<scri...
vue3-ts路由配置
07-27
在 Vue 3 中使用 TypeScript 进行路由配置的方法如下： 1. 首先，安装 Vue Router 和 TypeScript 的类型声明文件（如果尚未安装）： ```bash npm install vue-router npm install @types/vue-router --save-dev ``` 2. 在项目的根目录下创建一个 `router` 文件夹，并在其中创建一个 `index.ts` 文件。 3. 在 `index.ts` 中，引入必要的依赖和声明路由的配置： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; // 导入各个路由的组件 import Home from '../views/Home.vue'; import About from '../views/About.vue'; import NotFound from '../views/NotFound.vue'; // 定义路由配置 const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, }, ]; // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 4. 在主入口文件（通常是 `main.ts`）中，引入 `router` 并将其挂载到 Vue 应用中： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样，你就完成了 Vue 3 中使用 TypeScript 进行路由配置的步骤。请根据自己的需求修改路由的配置和组件路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值