TypeScript 进阶之泛型

这篇具有很好参考价值的文章主要介绍了TypeScript 进阶之泛型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

TypeScript 中通用型泛型以及6个常用方法

一、通用型

避免代码重复和创建可重用类型是编写干净代码的重要部分。

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
} 

二、Partial

将所有类型属性都设置为可选

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

// type PartialUser = {
//   name?: string;
//   age?: number;
//   address?: string;
//   occupation?: string;
// }

三、Required

Required 与 Partial 相反。它构造一个类型,其中需要该类型的所有属性。它可用于确保没有可选属性出现在类型中。

type PartialUser = {
  name: string
  age: number
  address?: string
  occupation?: string
}

type User = Required<PartialUser>

// type User = {
//   name: string;
//   age: number;
//   address: string;
//   occupation: string;
// }

四、Pick

多属性的对象中摘取某些属性。
键可以是字符串文字或字符串文字的并集。Keys 的值必须是 Type 的键,否则 TypeScript 编译器会报错。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

五、Omit

多属性的对象中剔除某些属性。
keys 不是关于保留哪些属性,而是要省略的属性键集。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

六、Readonly

该类型的所有属性都设置为只读。给 TS 重新赋新值会报错。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type ReadOnlyUser = Readonly<User>

const user: ReadOnlyUser = {
  name: "Mark",
  age: 34,
  address: "Chicago",
  occupation: "IT Engineer"
}

user.name = "Maxwell"
// Cannot assign to 'name' because it is a read-only property.

七、ReturnType

ReturnType 从函数类型的返回类型构造一个类型。当我们处理来自外部库的函数类型并希望基于它们构建自定义类型时,它很有用。文章来源地址https://www.toymoban.com/news/detail-816922.html

import axios from 'axios'

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

到了这里,关于TypeScript 进阶之泛型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】TypeScript中的泛型

    定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。 举个例子: 上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和

    2024年02月09日
    浏览(45)
  • 16.【TypeScript 教程】TypeScript 泛型(Generic)

    本节开始介绍 TypeScript 一些进阶知识点,第一个要介绍的泛型是 TypeScript 中非常重要的一个概念,它是一种用以增强函数、类和接口能力的非常可靠的手段。 使用泛型,我们可以轻松地将那些输入重复的代码,构建为可复用的组件,这给予了开发者创造灵活、可重用代码的能

    2024年01月18日
    浏览(42)
  • 前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

    🖥️ 前端经典面试题 专栏:吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答

    2024年01月17日
    浏览(47)
  • typeScript(泛型篇)

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中,可以使用 泛型 来创建可重用的组件,一个组件可以

    2024年02月10日
    浏览(40)
  • TypeScript中的泛型(泛型函数、接口、类、泛型约束)

    一、泛型函数 TypeScript 泛型是一种可以使代码具有更高的可重用性和泛化能力的特性 。通过泛型,我们可以定义一种通用的类型或函数,使其能够应对多种类型的输入。泛型在类、函数、接口等多种场景下都可以使用。 具体来说,在定义泛型函数时,我们可以使用来表示一

    2024年02月11日
    浏览(44)
  • TypeScript 关于对【泛型】的定义使用解读

    泛型 (Generics)是指在 定义函数、接口或类 的时候, 不预先指定具体的类型 ,而在 使用的时候再指定类型 的一种特性 。使用泛型 可以 复用类型并且让类型更加灵活 泛型实现类型参数化: 在定义这个函数时, 我不决定这些参数的类型 而是让调用者以参数的形式告知,我

    2024年02月13日
    浏览(36)
  • TypeScript - 泛型 Generics(通俗易懂详细教程)

    关于概念,本文不会过多叙述。 先来看个例子,体会一下泛型解决的问题吧。 我们定义一个 print 函数,这个函数的功能是把传入的参数打印出来,最后再返回这个参数,传入参数的类型是 string ,函数返回类型为 string 。 假如现在需求变了,我还需要打印 number 类型,请问怎

    2023年04月15日
    浏览(36)
  • TypeScript 泛型的概念和基本使用

    在定义函数,接口,类的时候不能预先确定使用的数据类型,而是在调用使用这些函数,接口,类的时候才能确定的数据类型; 1,单个泛型的参数 例如通过使用any这种方式,value1的类型随着传入的类型数据而变化: 改为泛型之后: 2,多个泛型的参数 3,泛型接口 泛型接口

    2024年02月13日
    浏览(40)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包