首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript-在泛型约束中使用类型参数

在泛型约束中使用类型参数概述一个泛型被另一个泛型约束, 就叫做 泛型约束中使用类型参数博主需求: 定义一个函数用于根据指定的 key 获取对象的 value:let getProps = (obj: object..., key: string): any => { return obj[key];}如上的代码在编译器当中是会报错的,报错的原因就是它不知道 obj[key] 返回的到底是不是 any 这个类型,...a: 'a', b: 'b'}let res = getProps(obj, "a");console.log(res);图片如上的代码 a 和 b 都是存在的 key,如果这个时候我要获取一个...c 的 key 的 value 那么就直接是 undefined 了,说明一个问题,代码不够健壮, 明明 obj 中没有 c 这个 key 但是却没有报错,那么这时就可以利用 在泛型约束中使用类型参数...obj 当中存在的属性,如果指定的 key 在 obj 当中不存在就不允许获取图片图片最后本期结束咱们下次再见~ 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的

20310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Typescript 使用日志(干货)

    类型都在哪里使用 在 Typescript 中,类型通常在以下几种情况下使用。 •变量中使用•类中使用•接口中使用•函数中使用 类型在变量中使用 在变量中使用时,直接在变量后面加上类型即可。...在接口中使用也比较简单,可以理解为组合多个单一类型。...泛型表示的是一个类型在定义时并不确定,需要在调用的时候才能确定的类型,主要包含以下几个知识点: •泛型函数•泛型类•泛型约束 T extends XXX 我们试想一下,如果一个函数,把传入的参数直接输出...•对象中的兼容•函数返回值兼容•函数参数列表兼容•函数参数结构兼容•类中的兼容•泛型中的兼容 在 Typescript 中是通过结构体来判断兼容性的,如果两个的结构体一致,就直接兼容了,但如果不一致,Typescript...•ReturnType,获取函数返回值类型。•InstanceType,获取构造函数类型的实例类型。 我们也可以编写自定义的映射类型。

    2.5K10

    【文末送书】Typescript 使用日志

    类型都在哪里使用 在 Typescript 中,类型通常在以下几种情况下使用。 •变量中使用•类中使用•接口中使用•函数中使用 类型在变量中使用 在变量中使用时,直接在变量后面加上类型即可。...在接口中使用也比较简单,可以理解为组合多个单一类型。...泛型表示的是一个类型在定义时并不确定,需要在调用的时候才能确定的类型,主要包含以下几个知识点: •泛型函数•泛型类•泛型约束 T extends XXX 我们试想一下,如果一个函数,把传入的参数直接输出...•对象中的兼容•函数返回值兼容•函数参数列表兼容•函数参数结构兼容•类中的兼容•泛型中的兼容 在 Typescript 中是通过结构体来判断兼容性的,如果两个的结构体一致,就直接兼容了,但如果不一致,Typescript...•ReturnType,获取函数返回值类型。•InstanceType,获取构造函数类型的实例类型。 我们也可以编写自定义的映射类型。

    2.9K10

    Typescript基础语法

    安装typescript npm install -g typescript 类型语法 通过在形参右侧使用 : 类型,代表限定的形参类型。...接口中可以指定方法成员类型,通过 方法名: (形参列表) => 返回值类型 来表示,或者 方法名 (形参列表) :返回值类型 interface Person { firstName: string...typescript支持类似java的泛型语法,比如类与接口上的泛型、方法上的泛型 interface GenericIdentityFn { fun(): T; funWithT(T a) : T;//此处T代表方法泛型,而非类泛型 } class GenericNumber { zeroValue: T; } 联合类型 typescript还支持创建一个可以指代多种类型的类型...,通过|运算符,即可使用不同类型创建一个联合类型,代表当前变量为其中之一,如 let a : string | number; 类型别名 typescript还支持为类型定义别名,这个可以用于联合类型

    1.5K20

    《现代Typescript高级教程》泛型和类型体操

    通过显式传递泛型参数,我们可以确保在函数调用时指定了具体的类型。 2. 泛型接口 泛型接口允许我们在接口定义中使用类型参数,以便在实现该接口时指定具体的类型。...泛型类 泛型类允许我们在类定义中使用类型参数,以便在创建类的实例时指定具体的类型。...Person 接口的属性名集合,并通过索引访问类型获取了 Person 接口中 name 属性的类型。...我们还可以结合泛型和内置泛型函数来实现更复杂的类型操作。以下是一个示例,展示了如何使用 Pick 和泛型来创建一个函数,该函数从给定对象中选择指定属性,并返回一个新的对象。...通过结合泛型、extends 关键字、内置泛型函数和其他高级类型概念,我们能够在 TypeScript 中编写更复杂、类型安全的代码,并利用 TypeScript 的强大类型系统来提高代码的可读性、可维护性和可扩展性

    37630

    深入学习下 TypeScript 中的泛型

    TypeScript 完全支持泛型,以此将类型安全性引入到接受参数和返回值的组件中,这些参数和返回值的类型,在稍后的代码中使用之前是不确定的。...在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...这不是语法规则,你可以像 TypeScript 中的任何其他类型一样命名泛型,但这种约定有助于立即向那些阅读你的代码的人传达泛型类型不需要特定类型。 泛型可以出现在函数、类型、类和接口中。...在本节中,您将了解在类和接口中声明泛型类型参数的语法,并检查 HTTP 应用程序中的常见用例。...在 TypeScript 中,这种结构被称为映射类型并依赖于泛型。在本节中,您将看到如何创建映射类型。

    39K30

    深入学习下 TypeScript 中的泛型

    TypeScript 完全支持泛型,以此将类型安全性引入到接受参数和返回值的组件中,这些参数和返回值的类型,在稍后的代码中使用之前是不确定的。...在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...这不是语法规则,你可以像 TypeScript 中的任何其他类型一样命名泛型,但这种约定有助于立即向那些阅读你的代码的人传达泛型类型不需要特定类型。泛型可以出现在函数、类型、类和接口中。...在本节中,您将了解在类和接口中声明泛型类型参数的语法,并检查 HTTP 应用程序中的常见用例。...这意味着它应该具有相同的属性,但属性的类型设置为不同的东西。对于这种情况,使用映射类型可以重用初始类型形状并减少应用程序中的重复代码。在 TypeScript 中,这种结构被称为映射类型并依赖于泛型。

    17510

    如何进阶TypeScript功底?一文带你理解TS中各种高级语法

    接口泛型位置 之所以将接口中的泛型单独拉出来和大家讲述,是因为在日常工作中经常会碰到一些同事对于泛型接口位置的不理解。...(2) getPersonValue(2) 这里上下两个例子特别像强调的是关于泛型接口中泛型的位置是代表完全不同的含义: 当泛型出现在接口中时,比如interface IPerson {}); 所以,这一点在日常开发中希望小伙伴们一定要特别留意:在泛型接口中泛型的声明位置不同所产生的效果是完全不同的。...keyof 关键字 所谓 keyof 关键字代表它接受一个对象类型作为参数,并返回该对象所有 key 值组成的联合类型。...这里我们定义了一个 GetSomeType 的类型,它接受一个泛型参数 T 。这个泛型参数 T 在传入时需要满足为 string 和 number 的联合类型的约束。

    2.1K10

    TS_React:使用泛型来改善类型

    你能所学到的知识点 ❝ TypeScript简单概念 泛型Generics的概念和使用方式 在React利用泛型定义hook和props ❞ 文章概要 TypeScript 是什么 泛型Generics...⻚ 可以在「编译期间」发现并纠正错误 作为⼀种「解释型语⾔」,「只能」在运⾏时发现错误 「强类型」,⽀持静态和动态类型 「弱类型」,没有静态类型选项 最终被编译成 JavaScript 代码,使浏览器可以理解...可以直接在浏览器中使⽤ ⽀持模块、泛型和接⼝ 不⽀持泛型或接⼝ ---- 获取 TypeScript 命令⾏的 TypeScript 编译器可以使⽤ npm 包管理器来安装。...❝设计泛型的「关键⽬的」是在「成员之间提供有意义的约束」,这些成员可以是:类的实例成员、类的⽅法、函数参数和函数返回值。...在正常的 TypeScript 中,不需要使用这种变通方法。 ---- 泛型示例:useState 先让我们来看看 useState 的函数类型定义。

    5.2K20

    TypeScript的另一面:类型编程

    这个时候泛型就该登场了,泛型使得代码段的类型定义易于重用(比如后续又多了一种接收布尔值返回布尔值的函数实现),并提升了灵活性与严谨性: 工程层面当然不会写这样的代码了......但就当个例子看吧:-) function foo(arg: T): T { return arg; } 我们使用T来表示一个未知的类型,它是入参与返回值的类型,在使用时我们可以显示指定泛型:...单独对于泛型的介绍就到这里(因为单纯的讲泛型实在没有什么好讲的),在接下来我们会讲解更多泛型的高级使用技巧。...你可以暂时把T extends object理解为T 被限制为对象类型,U extends keyof T理解为泛型 U 必然是泛型 T 的键名组成的联合类型(以字面量类型的形式,比如T的键包括a b...当ReturnType被调用,泛型T被实际类型填充,如果T满足条件类型的约束,就返回R的值,在这里R即为函数的返回值实际类型。

    1.7K20

    编写高效 TS 代码的一些建议

    但因为接口中 releaseDate 和 recordingType 属性的类型都是字符串,所以在使用 Album 接口时,可能会出现以下问题: const dangerous: Album = {...说到这里相信有一些小伙伴已经想到了 keyof 操作符,它是 TypeScript 2.1 版本引入的,可用于获取某种类型的所有键,其返回类型是联合类型。...为了实现上述的要求,你可能想到了引入泛型变量和泛型约束: function double(x: T): T; function double(x:...any) { return x + x; } 在上面的 double 函数中,引入了泛型变量 T,同时使用 extends 约束了其类型范围。...string : number; function double(x: any) { return x + x; } 这与前面引入泛型版本的 double 函数声明类似,只是它引入更复杂的返回类型。

    3.1K61

    React实战精讲(React_TSAPI)

    你能所学到的知识点 ❝ TS_React:使用泛型来改善类型 TS_React:Hook类型化 TS_React:类型化事件回调 React API ❞ TS_React:使用泛型来改善类型 TypeScript...可以直接在浏览器中使⽤ ⽀持模块、泛型和接⼝ 不⽀持泛型或接⼝ ---- 典型 TypeScript ⼯作流程 在上图中包含 3 个 ts ⽂件:a.ts、b.ts 和 c.ts。...❝泛型指的是「类型参数化」:即将原来某种「具体的类型进⾏参数化」 ❞ 在像 C++/Java/Rust 这样的 OOP 语⾔中,可以「使⽤泛型来创建可重⽤的组件,⼀个组件可以⽀持多种类型的数据」。...这样⽤户就可以以⾃⼰的数据类型来使⽤组件。 ❝设计泛型的「关键⽬的」是在「成员之间提供有意义的约束」,这些成员可以是:类的实例成员、类的⽅法、函数参数和函数返回值。...❝主要的「区别」是 在 JavaScript 中,关心的是变量的「值」 在 TypeScript 中,关心的是变量的「类型」 ❞ 但对于我们的User例子来说,使用一个「泛型」看起来是这样的。

    10.4K30

    了不起的 TypeScript 入门教程

    在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。...设计泛型的关键目的是在成员之间提供有意义的约束,这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。 泛型(Generics)是允许同一个函数接受不同类型参数的一种模板。...相比于使用 any 类型,使用泛型来创建可复用的组件要更好,因为泛型会保留参数类型。...对刚接触 TypeScript 泛型的小伙伴来说,看到 T 和 E,还有 K 和 V 这些泛型变量时,估计会一脸懵逼。...1.typeof 在 TypeScript 中,typeof 操作符可以用来获取一个变量声明或对象的类型。

    7K52

    1.8W字|了不起的 TypeScript 入门教程(第二版)

    不支持模块,泛型或接口 社区的支持仍在增长,而且还不是很大 大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装...设计泛型的关键目的是在成员之间提供有意义的约束,这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。 泛型(Generics)是允许同一个函数接受不同类型参数的一种模板。...相比于使用 any 类型,使用泛型来创建可复用的组件要更好,因为泛型会保留参数类型。 12.1 泛型语法 对于刚接触 TypeScript 泛型的读者来说,首次看到 语法会感到陌生。...其中 T 代表 Type,在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。...TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。

    10.3K51

    分享 40 道关于 Typescript 的面试题及其答案

    答案:TypeScript 中的泛型允许您创建可与各种类型一起使用的可重用组件或函数。它们支持强类型,同时保持使用不同数据类型的灵活性。...答案:TypeScript 中的“keyof”关键字是一个类型运算符,它返回表示对象键的文字类型的联合。它允许您对对象键执行类型安全操作。...答:“keyof”关键字用于获取对象类型的键的并集,“typeof”关键字用于获取值的类型。...答案:TypeScript 中的“keyof”运算符用于获取对象类型的键的并集。它允许您以类型安全的方式使用对象的键。...答案:TypeScript 中的类型谓词用于缩小条件块中值的类型范围。它们提供了一种执行类型检查并获取更具体类型的方法。

    86230
    领券