vue3_04_简单介绍ts的接口、泛型、自定义类型

已于 2024-05-05 22:29:28 修改
阅读量1k 收藏 10
点赞数 5
分类专栏： # 2014_vue 文章标签： vue.js
于 2024-05-02 19:15:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41748874/article/details/138397895
版权

24 - 回顾TS中的接口、泛型、自定义类型

ts这个东西TMD有什么用处；

引子

image-20240502184624257

第一个，如果你写上面的person对象的时候，name这个单词写错了，是不是没有给你提示的？

第二个，你的这个person对象传递给一个文件，再传递一个文件，经历了一些特殊的处理之后，就又传递给了另外的地方；

然后你再次进行person点属性的时候很有可能就是什么都点不出来了；

image-20240502184818687

这个时候就要上TS了；

要求

person有三个属性：id，name，age；

一般做项目都会有一个文件夹叫做types；

image-20240502184927269

问题：为什么文件名字叫做index.ts

因为index.ts这个名字，我们就是看中了index这个名字；

我们去其他地方引入这个玩意的时候，我的引入路径只需要写到/types就可以了，省事一点；

矫情；

需求：定义一个接口限制person对象

image-20240502185306874

插曲：暴露export有几种方式？

一共是有三种的；

  • 默认暴露：export default
  • 分别暴露：export
  • 统一暴露

插曲：引入的时候@符号表示的是什么

其实TMD，就是src的目录；

引入的小主意点

image-20240502185557964

看上面的图片，我们直接引入typescript的接口，就会报错；

类似上面的写法是不对的；

不对的；

不对的；

这是为什么呢？

为什么a是可以的，但是PersonInter就是不可以的呢？

这到底是为什么的呢？

这是因为a是一种值；MD的，PersonInter不是值；

所以，提醒我们引入的时候，要用下面的写法：

看看ts接口好用不

image-20240502185801807

你看上面，我们的name拼写错了，直接TMD就飘红了；

好用的好用的；

有人说ts麻烦，但是麻烦就是规范；

上面的ts接口就是限制了一个对象

我有一个list怎么限制？

这个玩意就是泛型；

这个意思就是我有一个personList，它的这个玩意是一个Array，然后里头的每一个元素都是符合PersonInter这种接口的；

大致上就是这个意思；

这不是一个高级的写法；

高级写法 - 自定义类型

image-20240502190527429

换一种写法

image-20240502190540199

这个就是第二种写法的；其实就是数组的另外的一个写法；

ts泛型接口
qq_43033748的博客
11-22 528
interface iPerson<T1=string,T2=number>{ name:T1 age:T2 } const p:iPerson={ name:"why", age:18 }
《Uniapp-Vue 3-TS 实战开发》TypeScript 泛型详解
最新发布
前端-尔嵘
04-11 299
泛型（Generics）是 TypeScript 中非常重要的特性，它允许我们创建可重用的组件，这些组件可以支持多种类型，而不会丢失类型安全性。// 错误：无法分配到"title"，因为它是只读属性。泛型是 TypeScript 中非常强大的特性，合理使用可以大大提高代码的可重用性和类型安全性。泛型允许我们在定义函数、接口或类时不预先指定具体类型，而是在使用时再指定类型。// 错误：m不是x的属性。泛型保持了类型约束，提供了更好的类型安全性。1. 什么时候使用泛型？
Vue3-TS中的接口-泛型-自定义类型
qq_42371932的博客
01-15 1720
当需要用这个类型形成数组时，有2种写法。
vue3第三十五节（TS 之 泛型）
刺客-Andy 的博客
05-28 1043
泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类泛型接口泛型方法。泛型使用来定义类型，中的T，也可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。
Ts的接口、泛型、自定义类型
weixin_68376171的博客
01-24 1685
TypeScript（TS）是一种强类型的JavaScript超集，它为JavaScript代码提供了类型检查功能。在TypeScript中，接口（Interfaces）、泛型（Generics）和自定义类型（Custom Types）是定义和强化代码类型的三种重要方式。接口是用来定义对象、类或函数的形状（shape）的一种类型系统。泛型是一种可以在定义函数、接口、类的时候，不预先指定具体的类型，而是在使用的时候再指定类型的特性。自定义类型通常是指那些使用TypeScript提供的类型系统来创建的新类型。
vue3 组件TS 类型声明
weixin_44064067的博客
09-27 1万+
Vue3 组件标注 TS 类型
如何在 Vue3 组件中使用 TS 类型（必看）
蜗牛~~
06-16 3825
（vue2中我们是通过给子组件设置ref属性，然后通过this.$refs.xxx.methods()来实现的），那这里如何实现呢？如何在 vue3 组件中使用 TS 类型的讲解就到此结束啦，有写的不对的地方，欢迎评论区指出哦~就会有提示，因此，建议显式地为事件处理函数的参数标注类型。注意：子组件的ref值应该和下面定义的值保持一致，如：modalRef。有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用。方式二：通过泛型参数来定义 props 的类型，这种方式更加直接。
【TypeScript】TS自定义类型之对象属性必选、对象属性可选（十一）
热门推荐
编码世界
04-03 6万+
TS中实现对象属性必选、对象属性在开发过程中十分常见，前端在传参数时，有些参数比必传，有些是选传，我们可以定一个多个对象来实现传参，但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。
在Vue 3中使用TypeScript进行类型转换
极客神殿
06-26 943
在Vue 3中使用TypeScript进行类型转换可以使代码更加健壮和可维护。
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在本项目中，"基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码"，开发者采用了一系列现代前端技术构建了一个功能丰富的流程图编辑工具。让我们详细了解一下这些关键技术及其在项目中的应用。 首先，Vue3是...
vue3初始化项目 sass vite ts
08-01
TypeScript是JavaScript的超集，它添加了静态类型系统和其他高级语言特性，如接口、泛型、枚举等，有助于预防编程错误和提高代码质量。在Vue3项目中，TypeScript的使用可以提升代码的可维护性和可读性，尤其是在大型...
Vue3【十六】TS中的接口、泛型，自定义类型
Ggome的博客
06-10 1161
TS中的接口、泛型，自定义类型。
ts中的泛型接口
yjwlike的博客
01-06 3741
在ts中常常会用接口来定义对象的类型, 用来规定对象中应该存在哪些属性, 这些属性是什么类型, 但是某些情况下, 我不希望对象中属性的类型固定, 而是我传入什么类型, 属性就是什么类型 , 此时就需要使用泛型接口 . 我们先定义一个接口 interface objType { money: (value: number) => number arr: () => string[] } const obj2: objType = { money: (val) => val,
Vue3 功能实战 —— 使用 Ts 泛型封装本地存储
技术前端，忠于热爱 @0.活在风浪里
05-15 1928
Vue3 使用TS泛型 封装本地存储
TypeScript 基础：接口、泛型和自定义类型在 Vue 3 中的应用
俎树振的博客
04-19 1670
介绍在 Vue 3 中应用 TypeScript 的核心特性：接口、泛型和自定义类型。通过示例展示了如何利用这些特性定义类型安全的组件属性，并创建可重用的函数和组件。通过完整的 Vue 3 组件示例，演示如何整合这些特性到实际的组件开发中，以提高代码质量和开发效率。
ts：泛型接口、泛型类
小蜗牛764号的博客
10-29 1556
本来泛型接口和泛型类想分开各编写一篇博文的，后面发现相似处比较多，合起来编写工作量也不算太大，于是就合起来编写了。代码编写出来并不是很难，难的是编写出来后，要如何说明。某种意义上来说，代码其实已经是所要说的全部内容了。但是如果只把代码怼上去，文字说明啥的都不添加，后面回顾忘了咋办。还是尽量留点思路，后面忘了回顾过来也可以快些将知识捡回来。没有思路留下，后面回来估计会对代码发懵的。最近多了异步、接口的知识，但是时间类型也很重要，数组的方法也还有。
TS（类 接口 泛型）
HBR666_的博客
11-03 1122
注意 对象结构不需要 implements一个interface继承另一个interface从而实现代码的复用何时使用接口1.定义对象的格式：描述数据模型，API响应格式，配置对象等等 是开发中用的最多的场景2.类的契约：规定一个类需要实现哪些属性和方法3.扩展已有接口：一般用于扩展第三方库的类型，这种特性在大型项目中可能会用到。
泛型 【Vue3+ts+hoot.ts】
weixin_68903201的博客
03-02 382
【代码】泛型 【Vue3+ts+hoot.ts】
vue3+ts 调用接口，数据显示
weixin_42479421的博客
04-02 1624
typescript 数据展示、筛选展示
ts中泛型
04-03
<think>嗯，用户想了解 TypeScript 中的泛型。首先，我需要回忆泛型的基本概念。泛型在 TS 中是用来创建可复用组件的，允许类型作为参数，提高代码的灵活性和安全性。用户可能已经知道一些类型基础，但想深入泛型。 接下来，用户的应用场景可能是什么？他们可能在写函数或类时需要处理多种数据类型，但不想重复代码。比如，一个处理数组或API响应的函数。这时候泛型就能派上用场，避免使用 any 类型失去类型检查的好处。 用户可能的疑问点包括泛型语法、使用场景、高级用法如泛型约束、默认类型等。需要分步骤解释，从简单例子入手，逐步深入。比如先展示没有泛型的问题，再引入泛型解决方案。 要注意用户可能对类型参数的理解有困难，需要用类比，比如函数的参数但作用于类型。同时，要强调泛型的好处：代码复用和类型安全。举例说明，比如 identity 函数，用 any 会丢失类型信息，用泛型则保留。 可能还需要提到泛型在接口、类中的应用，以及常见工具类型如 Partial、Readonly 的实现原理。此外，约束和默认值也是重要部分，比如 extends 和 keyof 的使用，帮助用户处理更复杂的情况。 需要检查是否有常见的错误理解，比如认为泛型会增加运行时开销，但实际上泛型只在编译时起作用。还要提醒类型推断的情况，有时候不需要显式指定类型参数，编译器会自动推断。 最后，总结使用泛型的最佳实践，比如何时使用，如何保持代码简洁，避免过度使用导致代码难以理解。确保用户不仅知道怎么用，还知道何时用，以及背后的设计理念。</think>好的，我来为您逐步讲解 TypeScript 中的泛型（Generics）： # 一、为什么需要泛型？ 假设我们要写一个返回参数本身的函数： ```typescript // 使用 any 的写法（不安全） function identity(arg: any): any { return arg } ``` - ✅ 可以接受任意类型 - ❌ 丢失了类型信息（输入 number 会被推断为 any） # 二、泛型的基本使用 用类型变量 `<T>` 解决上述问题： ```typescript // 泛型写法（保持类型） function identity<T>(arg: T): T { return arg } // 使用示例 const output1 = identity<string>("hello") // 显式指定类型 const output2 = identity(42) // 自动类型推断（推荐） ``` - `T` 会捕获传入的类型，并在整个函数中保持这个类型 - 支持类型推断，通常不需要显式指定 # 三、泛型的核心特点 1. **类型参数化**：把类型当作参数传递 2. **代码复用**：一套逻辑支持多种类型 3. **类型安全**：编译时进行类型检查 # 四、常见应用场景 ## 1. 处理数组 ```typescript function getFirst<T>(arr: T[]): T { return arr[0] } // 使用 const num = getFirst([1, 2, 3]) // number 类型 const str = getFirst(["a", "b", "c"]) // string 类型 ``` ## 2. 接口中使用 ```typescript interface ApiResponse<T> { code: number message: string data: T } // 使用 const userResponse: ApiResponse<{name: string, age: number}> = { code: 200, message: "success", data: { name: "Alice", age: 30 } } ``` ## 3. 类中使用 ```typescript class Box<T> { private content: T constructor(value: T) { this.content = value } getValue(): T { return this.content } } // 使用 const numberBox = new Box<number>(42) const stringBox = new Box("hello") // 自动推断为 string ``` # 五、高级用法 ## 1. 泛型约束（Generic Constraints） ```typescript interface HasLength { length: number } function logLength<T extends HasLength>(arg: T): void { console.log(arg.length) } logLength("hello") // 5 logLength([1,2,3]) // 3 logLength(123) // 错误：number 没有 length 属性 ``` ## 2. 使用类型参数 ```typescript function getProperty<T, K extends keyof T>(obj: T, key: K) { return obj[key] } const person = { name: "Bob", age: 25 } getProperty(person, "age") // 正确 getProperty(person, "email") // 错误：email 不存在于 person ``` ## 3. 默认类型参数 ```typescript interface Pagination<T = string> { data: T[] pageSize: number total: number } // 使用默认类型 const strPagination: Pagination = { /*...*/ } // 自定义类型 const numPagination: Pagination<number> = { /*...*/ } ``` # 六、最佳实践建议 1. 优先让 TypeScript 自动推断类型 2. 当需要类型关系时才使用泛型 3. 使用有意义的类型参数名称（如 T, U, V 或更具体的名称） 4. 避免过度使用泛型导致代码可读性下降 # 七、常见工具类型原理 这些内置工具类型都是基于泛型实现的： ```typescript type Partial<T> = { [P in keyof T]?: T[P] } type Readonly<T> = { readonly [P in keyof T]: T[P] } type Pick<T, K extends keyof T> = { [P in K]: T[P] } ``` 通过泛型，我们可以编写类型安全且高度复用的代码，这是 TypeScript 类型系统中非常强大的特性。建议从简单场景开始实践，逐步掌握更复杂的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值