TS泛型类、泛型接口、泛型函数

泛型

泛型是一种参数化数据类型,具有以下特点
1:定义时不明确,使用时必须明确成 某种具体数据类型 的数据类型【泛型的宽泛】
2:编译期间进行 数据类型安全检查 的数据类型【泛型的严谨】

泛型类的格式: class 类名<泛型形参类型>{ }

  class ArrayList<T>{  
    array: Array<T>
    add(data:T){
        ....
    }
    ....
  }

泛型形参类型一般有两种表示:
1、 A-Z 任何一个字母(绝大多数情况是这种)
2、 语义化的单词来表示

class ArrayList<T> {
  public element: Array<T>;
  constructor() {
    this.element = [];
  }
  public index: number = 0;
  public add(ele: T) {
    this.element[this.index++] = ele;
  }
  get(index: number): T {
    return this.element[index];
  }
}

type stuType = { stuname: string; age: number; address: string };
let stuOne: stuType = { stuname: "wnagwu", age: 23, address: "beijing" };
let stuTwo: stuType = { stuname: "lisi", age: 39, address: "shanghai" };
let stuThree: stuType = { stuname: "liuqi", age: 31, address: "nanjing" };

let arrayList3 = new ArrayList<stuType>();
arrayList3.add(stuOne);
arrayList3.add(stuTwo);
arrayList3.add(stuThree);

let stuobj = arrayList3.get(1);
console.log(stuobj.stuname); //能点出来

//泛型如果在使用时没有具体化的类型,那么就会默认为unknown数据类型
//class ArrayList<T=any> {} //这样默认值就是any
//class ArrayList<T=number> {}
//这样默认值就是number,但下面的arrayList5.add("abc")就会报错
let arrayList5 = new ArrayList();
arrayList5.add(3);
arrayList5.add("abc");
arrayList5.add(stuOne);
arrayList5.get(2); //点不出来,类型“unknown”

泛型约束

泛型约束简单点说就是把泛型的具体化数据类型范围缩小
T extends object 表示具体化的泛型类型只能是 object 类型


泛型接口+ 泛型类 + 泛型约束 + 多态

//泛型接口 + 泛型类
interface List<T> {
  add(ele: T): void;
  get(index: number): T;
  size(): number;
}

class ArrayList<T> implements List<T> {
  public array: Array<T>;
  public index: number = 0;
  constructor() {
    this.array = [];
  }
  public add(ele: T) {
    this.array[this.index++] = ele;
  }
  size() {
    return this.index ? this.index : 0;
  }
  get(index: number): T {
    return this.array[index];
  }
}

// 定义继承类(多态)
abstract class People {
  public name!: string;
  public abstract info(): void;
  public eat() {
    console.log("人类-吃饭");
  }
}

class Man extends People {
  public info() {
    console.log("男人");
  }
}
class Woman extends People {
  public info() {
    console.log("女人");
  }
}

// 结合使用
class Tcs {
  //泛型约束
  public rent<T extends object>(list: List<T>) {
    for (let i = 0; i < list.size(); i++) {
      let res = list.get(i);
      console.log("get拿到的类型是:", res);
      //虽然传入前和get拿到的类型是一样的,外部可以点操作,这里不行。
      //是因为谁知道你传入的泛型类是否一定有info()函数,所以需as断言后才能使用点
      //或者泛型约束为People类型
      (res as any).info(); //用了any自然不能点操作
    }
  }
}

//let aList: List<String> = new ArrayList<String>();
//泛型约束是为了防止,如上句,泛型为String则会影响Tcs类的内部代码使用
let aList: List<People> = new ArrayList<People>();
//上句:左边是List接口,右边是ArratList接口。同样是多态,接口的多态
let bus: People = new Woman(); //类的多态
console.log("传入前的类型是:", bus);
aList.add(bus);
aList.add(new Man()); //类的多态

let tc = new Tcs();
tc.rent(aList);
export {};

泛型函数:

格式: 函数名<泛型1,泛型2> (参数中可以使用泛型类型):返回值也可以是泛型类型

泛型函数好处:可在调用返回后 得到返回值的具体数据类型,从而有点操作和类型错误的提示

let numArr: number[] = [1, 3, 5, 7];
let strArr: Array<string> = ["a", "c", "e", "g"];

// Array<T> 等于 T[]
function funa<T>(arr: Array<T>): T[] {
  let newNumArr: Array<T> = [];
  newNumArr.push(arr[0]);
  return newNumArr;
}
console.log("funa1:", funa(numArr)); // [ 1 ]
console.log("funa2:", funa(strArr)); // [ 'a' ]

泛型函数+重载

function funb(data: string): string;
function funb<T>(data: T): T;
function funb(data: any): any {
  if (typeof data === "string") {
    return "字符串类型";
  }
  if (data instanceof Array) {
    return funa(data);
  }
}
console.log("funb1:", funb("abcde")); // 字符串类型
console.log("funb2:", funb(numArr)); // [ 1 ]
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容