TS-泛型

TS 专栏收录该内容
5 篇文章 0 订阅

TS-泛型

1.当需要 定义 一个 参数 类型 与 返回 值 类型 不确定的 函数 时:

  • 使用 any
function test(name:any):any{
	console.log('this is 泛型 demo');
	/*
		...
	*/
	return name
}
test(123);
使用 any  定义 时  存在 问题: 虽然 可以 知道 传入值 的类型 但是  无法 获取 函数 返回 值 的 类型 。

这 个 问题 可以 用 泛型 很好 的解决。

2.泛型定义:

  • 泛型 是 指 在 定义 函数 /接口 / 类 时,不预先 指定 具体 的 类型,而是 在 使用 的 时候 再 指定 类型限制 的 一种 特性。
  • 用法:
    使用 方法 一:
function test<T>(name:T):T{
	console.log('hellow 泛型');
	/*
		...
	*/
	return name;
}
test<number>(123);   //  最终 返回 值 是 number 类型

//定义 多个 类型
test<number|string>(123);  //  返回 值为 number 类型     可以 传入 字符串 或者  数值 类型
//类型 之间 用 | 符号 分隔

使用 类似 于 函数 传参,传 什么 数据 类型 则 T 表示 什么 数据类型,使用 <…> 表示。T也可以 换成 任意 字符。

若指定 了 返回 值为 泛型 如 上述函数 ,则 函数 必须 返回 任意类型,即 返回值 类型 不可以 是 明确 规定 的 类型,注意 隐式转换。
eg:

function test<T>(name:T):T{
	console.log('hellow 泛型');
	/*
		...
	*/
	return name+'aaa';   // error          because 字符串 + 任何 数据 都等于 字符串  所以 这里 相当于 固定了 返回 值 为 字符串
}

使用 方法 二:
类型 推断

//直接调用 不传 泛型 实参
test(123);  // 此时 相当 与   test<number>(123)       编译器 会 自动识别 传入 的 参数 ,将 传入 的 参数  类型 认为 是 泛型 指定 的 类型

//若 函数 有 2个 及 以上 参数  且 有 2个 及 以上 参数 指定的 类型 都为 泛型
function test<T>(name:T,age:T):T{
	return name;
}
//此时 类型 推断 会 默认 将 第一个 参数 的 数据类型 作为 泛型 指定的 类型
test(123,'111'); //error  此时 必须 传 numbe 类型

注意:使用 泛型 会相当 容易 出错 ,所以 看情况 使用 ,不要 什么 都使用 泛型。
eg: 当 一个 函数 的 参数 使用 泛型 限制 类型 时,则 在 该 方法 内 此 参数 使用 的 方法 必须是 所有 类型 通用 的 方法 ,否则会报错。

function test<T>(titile:T,name:T):boolean{
	let  index = title.indexOf(name);    // error     indexOf  number boolean等 类型  不能 使用  
	return index === -1;
}
  • 在 接口 中 使用 泛型
interface Search {
	<T>(name:T,age:T):boolean
}
let fn:Search =  function <T>(name:T,age:T):boolean{
	return  name === age;
}
fn<string>('111','222');
  • 泛型 在 类 中 的 运用
class  Animal <T>{    // 此处 的 泛型 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
	name:T;
	constructor(name:T){
		this.name = name;
	}
	action<T>(say:T):T{//  此处 为  限制 类 中 成员 方法 action    若 此处 不写 <T> 则 使用 类 声明的 <T>
		return say;
	}
}
let dog = new Animal<string>('dog');        // 此处 的 striing 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
dog.action<number>(123); //  此处 为  限制 类 中 成员 方法 action   
  • 扩展:
    (1).约束泛型 使用 接口 约束 泛型
    使用 extends 用于 约束 泛型 如下:
interface LengthNum {
	length:number;
}
function fn<T extends LengthNum>(name:T):T{
	return name
}
//  此时  相当于 约束 了 泛型 的 类型 必须 是 含有 length 属性 的 数据类型
fn<number>(123);// error     number 类型 没有 length 属性

fn<string>('111'); // success   string 类型 有 length 属性

fn<object>({}); //error    object 类型 没有 length 属性

(2).数组 泛型

let arr: Array<number> = [1,2,3,4];     ===    let arr: number[] = [1,2,3,4]

写一个 稍微复杂的 例子:

function createArray<T>(length:number,value:T):Array<T>{
		let  result: T[] = [];
		for(let i=0;i<length;i++){
			result.push(value);
		}
		return result;
}
createArray<string>(3,'x');   //   此时 表示 该 函数 必须 返回 一个 字符串 数组

注意:
1.函数 在定义 时 若 指定 返回 值 不为 void 或者 any 则 在函数 内 必须 写 return

  • 3
    点赞
  • 0
    评论
  • 17
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

皮的狠

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值