大连博硕网站建设,该网站使用的安全设置,最新国际新闻大事件,如何销售自己产品方法有哪些typescript 泛型
泛型是可以在保证类型安全前提下#xff0c;让函数等与多种类型一起工作#xff0c;从而实现复用#xff0c;常用于: 函数、接口、class中。 需求:创建一个id 函数#xff0c;传入什么数据就返回该数据本身(也就是说#xff0c;参数和返回值类型相同)。 …typescript 泛型
泛型是可以在保证类型安全前提下让函数等与多种类型一起工作从而实现复用常用于: 函数、接口、class中。 需求:创建一个id 函数传入什么数据就返回该数据本身(也就是说参数和返回值类型相同)。
function id(value: number): numberreturn value比如id(10)调用以上函数就会直接返回10 本身。但是该函数只接收数值类型无法用于其他类型为了能让函数能够接受任意类型可以将参数类型修改为 any。但是这样就失去了TS 的类型保护类型不安全。
function id(value: any): any return value }泛型在保证类型安全(不丢失类型信息)的同时可以让函数等与多种不同的类型一起工作灵活可复用。实际上在C#和lava等编程语言中泛型都是用来实现可复用组件功能的主要工具之一
泛型是TypeScript中的一种工具它允许你创建可重用的组件这些组件可以在多种类型上工作而不仅仅是一个类型。它们为你提供了一种方式来捕获类、接口或函数中的类型信息。
泛型函数
创建泛型函数
function idType(value: Type): Type { return value }tips:
语法:在函数名称的后面添加(尖括号),尖括号中添加类型变量,比如此处的Type类型变量Type,是一种特殊类型的变量,它处理类型而不是值该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)因为Type是类型,因此可以将其作为函数参数和返回值类型,表示参数和返回值具有相同类型类型变量Type可以是任意合法变量名称
调用泛型函数,
调用泛型函数方式很简单,在你调用泛型函数的时候用尖括号告诉ts你现在用的是啥类型值就好了
function idType(value: Type): Type { return value }// 声明一个number类型变量用于接收泛型函数id输出的参数
// 给泛型函数id传递一个number类型的参数10,它会返回一个number类型的值
let num: number idnumber(10)// 声明一个string类型变量用于接收泛型函数id输出的参数
// 给泛型函数id传递一个string类型的参数hello, 它会返回一个string类型的值
let str: string idstring(hello)tips
语法:在函数名称后面添加(尖括号),尖括号中指定具体的类型,比如上面的number类型当传入number后,这个类型就会被函数声明时指定的类型变量Type捕获到此时,Type的类型就是number,所以函数id参数和返回值的类型也都是number
同样的,当传入类型是string,函数id参数和返回值的类型就都是string 这样,通过泛型就做到了让id函数与多种不同的类型一起工作,实现了复用的同时保证了类型安全
使用类型推论,简化泛型函数的调用
如下示例
在调用泛型函数时,可以省略类型来简化泛型函数的调用此时,TS内部会采用一种叫做类型参数推断机制,来根据传入的实参自动推断出类型变量Type的类型比如,传入实参10,TS会自动推断出变量num的类型number,并作为Type的类型
tips: 更推荐这种简化的方式调用泛型函数,因为这样代码更短,更利于阅读(其实几乎所有的编程语言都是在声明的时候各种约束写起来复杂,但是调用的时候轻松) 但是当编译器无法推断类型或推断的类型不准确时,就需要显示的传入类型参数, 示例:比如一个最常见的,字面量类型推断 如上图,当输入的是一个字符串hello时,ts会推论出它是hello这种字面量类型,但是其实我们不是想要这种类型,我们是想要字符串类型,这时候就需要显示的传入类型参数,
泛型接口
泛型接口:接口也可以配合泛型来使用,以增加其灵活性,增强其复用性 示例如下 tips
在接口名称的后面添加类型变量那么这个接口就变成了泛型接口。接口的类型变量对接口中所有其他成员可见也就是接口中所有成员都可以使用类型变量使用泛型接口时需要显式指定具体的类型 (比如此处的ldFuncnunber)此时id方法的参数和返回值类型都是number;ids方法的返回值类型是number[]。
实际上js数组在ts中就是一个泛型接口, 示例如下
泛型类
泛型类:class也可以配合泛型来使用 比如 React的class组件的基类Component就是泛型类,不同的组件有不同的props和state
interface IState { count: number }
interface IProps { maxLength: number }
class InputCount extends React.ComponentIProps, IState {state: IState { count: 0 }render() {return div{ this.props.maxLength } /div}
}tips React.Component 泛型类两个类型变量,分别指定props和state类型
创建泛型类 tips:
类似于泛型接口,在class名称后面添加类型变量这个类就变成了泛型类此处的add方法,采用的是箭头形式的类型书写方式
创建泛型类实例 类似于泛型接口,在创建class实例时,在类名后面通过类型来指定明确的类型
泛型约束
泛型约束:默认情况下,泛型函数的类型变量Type可以代表多个类型,但是这也就导致了无法访问任何非公共类型属性 比如,id(‘abc’)正常来说调用函数时可以获取参数的长度,
这是因为当使用泛型时TypeScript 无法确定传入的确切类型因此它不会检查传入的类型是否具有 length 属性。这是因为在 TypeScript 中任何类型都可以作为泛型参数包括那些没有 length 属性的类型比如 number。
错误提示如下 为了解决这个问题我们可以为泛型参数添加约束以限制其可能的类型。例如如果你希望传入的类型是数组或字符串因为这两种类型都有 length 属性 如下实例 添加泛型约束收缩类型,主要有两种方式.
指定更加具体的类型添加约束
示例如下 3. 指定更加具体的类型, 如下,将类型修改为Type,因为只要是数组,就一定存在length属性,因此就可以访问到length属性了
. 添加约束, 首先创建一个名为IsLength的接口该接口要求实现它的对象必须具有length属性。接下来通过让类型T继承该接口来进行约束确保类型T也满足接口的要求。这样泛型T也就具备了接口IsLength所定义的条件。
tips:因为number类型变量没有.length属性,所以现在再传number属性值时就会报错了
创建描述约束接口IsLength,该接口要求lenagth属性通过extends关键字使用该接口,为泛型(类型变量)添加约束该约束表示:传入的值必须具有length属性
tips : 传入的实参(比如,数组)只要length属性即可,
多个泛型变量约束
泛型的类型变量可以有多个,并且类型变量之间,还可以约束(比如第二个变量受第一个类型变量约束) 示例如下 // 定义一个泛型函数 getProp。这个函数接收一个对象 obj 和一个键 key 作为参数。 // Type 是一个泛型表示对象的类型。key extends keyof Type 表明 key 是 Type 的一个属性名。 // 这个函数返回 obj 对象上 key 键对应的值这个值的类型是 Type[key]。 function getPropType, key extends keyof Type(obj: Type, key: key): Type[key] { // 返回 obj 对象上 key 键对应的值。 return obj[key]; } // 定义一个名为 person 的对象该对象有两个属性name 和 age。 let person { name: 张三, age: 20 }; // 调用 getProp 函数传入 person 对象和 name 键返回 person 对象的 name 属性的值。 // 这行代码的结果是 张三。 getProp(person, name)添加了第二个类型变量 Key两个类型变量之间使用 (,)逗号分隔keyof 关键字接收一个对象类型生成其键名称 (可能是字符串或数字)的联合类型。本示例中keyof Type 实际上获取的是person 对象所有键的联合类型也就是:‘name|age’。类型变量Key 受Type 约束可以理解为: Key只能是Type 所有键中的任意一个或者说只能访问对象中存在的属性。
泛型工具类
**泛型工具类型:**TS内置了一些常用的工具类型来简化TS中的一些常见操作。说明:它们都是基于泛型实现的(泛型适用于多种类型更加通用)并且是内置的可以直接在代码中使用。这些工具类型有很多常用的有以下几个:
PartialTReadonlyTPickT,keysRecordKeys,T
PartialT – 可选
泛型工具类-Partial用来构造(创建)一个类型,将T的所有属性设为可选 tips:通过Partial构造出来的新类型PartialProps结构和Props相同,但所有属性都变为可选的
如下,使用了Partial工具类的类实例可以让属性为空,但是没用Partial加工的类就不行
ReadonlyT – 只读
泛型工具类:ReadonlyT用来构造一个类型,将T的所有属性都设置为readonly(只读) 如下,使用Readonly工具类加工了的ReadonlyProps类的属性就都是只读的了
PickT,Keys --keys属性构造新类型
泛型工具类PickT,Keys 从T中选择一组属性来构造新类型 tips:
pick工具类有两个类型变量,1.表示选择谁的属性,2. 表示选择那几个属性其中第二个类型变量,如果只选择一个则只传入该属性名即可第二个类型变量,如果只选择一个则只传入该属性名即可构造出来的新类型PickProps只有id和title两个属性类型
