TypeScript 可以进行类型编程,这会极大提高 TypeScript 在复杂场景下的应用场景。

这篇具有很好参考价值的文章主要介绍了TypeScript 可以进行类型编程,这会极大提高 TypeScript 在复杂场景下的应用场景。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们来看一下 TypeScript 中的泛型,这也是很多同学觉得 TypeScript 很难的最大原因。

首先我们看下面的代码,我们定一个 idientity0 函数,这个函数逻辑非常简单,就是直接返回参数,那么我们怎么确定返回值的类型呢?

因为输入值可以是任意属性,所以我们只能写出 identity0 这个函数,参数和返回值类型都是 any,但是明显不能满足我们的需求。我们需要返回值的类型和参数一致,所以我们在函数名之后使用 <> 定一个泛型 T,你可以理解这个 T 的意思就是给函数参数定义了一个类型变量,会在后面使用,相当于【type T = arg 的类型】,返回值使用 T 这个类型就完成了这个需求。


function identity0(arg: any): any {
    return arg
}
// 相当于type T = arg的类型
function identity<T>(arg: T): T {
    return arg
}
identity<string>('玩转vue 3全家桶') // 这个T就是string,所以返回值必须得是string
identity<number>(1)

有了泛型之后,我们就有了把函数参数定义成类型的功能,我们就可以实现类似高阶函数的类型函数。下面的代码中我们使用 keyof 语法获得已知类型 VueCourse5 的属性列表,相当于 ‘name’|‘price’:


interface VueCourse5 {
    name:string,
    price:number
}
type CourseProps = keyof VueCourse5 // 只能是name和price选一个
let k:CourseProps = 'name'
let k1:CourseProps = 'p' // 改成price

keyof 可以帮助我们拆解已有类型,下一步我们需要使用 extends 来实现类型系统中的条件判断。我们定义类型函数 ExtendsType,接受泛型参数 T 后,通过判断 T 是不是布尔值来返回不同的类型字符串,我们就可以通过 ExtendsType 传入不同的参数去返回不同的类型。


// T extends U ? X : Y 类型三元表达式

type ExtendsType<T> = T extends boolean ? "重学前端" : "玩转Vue 3"
type ExtendsType1 = ExtendsType<boolean> // type ExtendsType1='重学前端'
type ExtendsType2 = ExtendsType<string> // type ExtendsType2='玩转Vue 3'

extends 相当于 TypeScript 世界中的条件语句,然后 in 关键字可以理解为 TypeScript 世界中的遍历。下面的代码中我们通过 k in Courses 语法,相当于遍历了 Courses 所有的类型作为 CourseObj 的属性,值的类型是 number。


type Courses = '玩转Vue 3'|'重学前端'
type CourseObj = {
    [k in Courses]:number // 遍历Courses类型作为key
}
// 上面的代码等于下面的定义
// type CourseObj = {
//     玩转Vue 3: number;
//     重学前端: number;
// }

学完上面的语法,你就能完全搞懂第 18 讲里的 getProperty 函数。限制函数第二个参数只能是第一个参数的属性,并且返回值的类型,最后我们传递不存在的属性时,TypeScript 就会报错。


// K extends keyof T限制K的类型必须是T的属性之一
// T[K]是值得类型
function getProperty<T, K extends keyof T>(o: T, name: K): T[K] {
    return o[name]
}
const coursePrice:CourseObj = {
    "玩转Vue 3":129,
    "重学前端":129
}
getProperty(coursePrice,'玩转Vue 3')
getProperty(coursePrice,'不学前端') // 报错

然后我再给你讲解最后一个关键字 infer。 让我们拥有了给函数的参数定义类型变量的能力,infer 则是可以在 extends 之后的变量设置类型变量,更加细致地控制类型。下面的代码中我们定义了 ReturnType 类型函数,目的是返回传入函数的返回值类型。infer P 的意思就是泛型 T 是函数类型,并且这个函数类型的返回类型是 P。文章来源地址https://www.toymoban.com/news/detail-534442.html


type Foo = () => CourseObj

// 如果T是一个函数,并且函数返回类型是P就返回P
type ReturnType1<T> = T extends ()=>infer P ?P:never 
type Foo1 = ReturnType1<Foo>

到了这里,关于TypeScript 可以进行类型编程,这会极大提高 TypeScript 在复杂场景下的应用场景。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • TypeScript 联合类型,类型推断,类型断言

    取值可以为多种类型中的一个 当变量需要调用某属性的时候,有不确定当前的类型是什么,可以使用类型断言; 类型断言的两种方式: 1,类型 变量名; 2,值 as 类型; 没有明确的指定类型的情况下推断出一个类型;

    2024年02月15日
    浏览(32)
  • TypeScript高级类型:联合类型、交叉类型和类型别名

    TypeScript 是一门强类型语言,其高级类型功能使得开发者能够更加灵活地定义类型并对其进行操作,以便于更好地编写可维护和可扩展的代码。 在本文中,将着重讨论三种高级类型:联合类型、交叉类型和类型别名。我们将详细介绍这些类型,并且还会提供一些有用的代码示

    2024年02月10日
    浏览(33)
  • Typescript的类型推导与联合类型

    考虑以下 TypeScript 代码片段: 1、请解释 processInput 函数的作用和输入参数的类型。 2、解释变量 example1 和 example2 的类型注解。 3、描述 TypeScript 在调用 processInput(example1) 和 processInput(example2) 时是如何进行类型推导的。 解答: 1、processInput 函数接受一个参数 input,该参数的类

    2024年01月21日
    浏览(49)
  • 可扩展性和可靠性:区块链的特性使得它可以极大地满足应用场景的需要,但是同时也带来了新的挑战——系统的可扩展性

    作者:禅与计算机程序设计艺术 随着互联网、移动互联网和物联网技术的飞速发展,数据量呈爆炸式增长,这给传统数据库系统遇到的新问题提出了更加复杂的挑战。为了应对这一挑战,区块链技术应运而生,它是一个分布式数据库系统,它解决了容错和防篡改的问题,并且

    2024年02月08日
    浏览(32)
  • TypeScript 学习笔记(一):基本类型、交叉类型、联合类型、类型断言

    TS中实现对象属性必选、对象属性在开发过程中十分常见,前端在传参数时,有些参数比必传,有些是选传,我们可以定一个多个对象来实现传参,但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。 TypeScript中文网 1. 数组 2. 布尔 3. 数值 当我们给num赋值为123但没有

    2024年02月15日
    浏览(37)
  • 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【TypeScript专栏】 上篇文章讲解了TypeScript部分高级类型 详细内容请阅读如下:🔽 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性 今天来学习TypeScript另外一些高级类型! 感兴趣的小伙伴一起来

    2023年04月08日
    浏览(29)
  • Typescript基础知识(类型拓宽、类型缩小)

    引入一:Typescript基础引入(基础类型、元组、枚举) 引入二:Typescript面向对象引入(接口、类、多态、重写、抽象类、访问修饰符) 第一章:Typescript基础知识(Typescript介绍、搭建TypeScript环境、基本数据类型) 第二章:Typescript常用类型(任意值any、数组Array、函数Functio

    2024年02月12日
    浏览(34)
  • TypeScript基础知识:类型守卫和类型推断

            在 TypeScript 中,类型守卫和类型推断是两个重要的概念,它们可以帮助我们更好地理解和利用类型系统的优势。本文将详细介绍这两个概念,并提供示例代码来说明它们的用法和优势。         类型守卫是一种在 TypeScript 中用于缩小变量类型范围的技术。当我

    2024年02月02日
    浏览(41)
  • 【TypeScript】类型推断与类型别名的使用方式。

    什么是类型推断? 在 TypeScript 中, 如果声明变量时, 没有明确的指定类型 ,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。 以下代码虽然 没有明确指定类型 ,但是会在编译的时候报错: 事实上,它等价于: TypeScript 会在没有明确的指定类型的时候,

    2024年02月16日
    浏览(40)
  • TypeScript 获取函数的参数类型、返回值类型

    事例: 使用预定义的 Parameters 可以获取到一个函数的参数类型列表。 获取 test 函数的参数类型: 获取 idx 参数的类型: 我们看一下 Parameters 的定义: 我们可以看到,其实它主要是通过 infer P 获取到 T 的参数类型列表 P 并返回,如果 T 不是函数则返回 never 。 使用预定义的

    2024年02月09日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包