美文网首页js css html
TS泛型类、泛型接口、泛型函数

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

作者: wyc0859 | 来源:发表于2022-03-17 00:21 被阅读0次

泛型

泛型是一种参数化数据类型,具有以下特点
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 ]

相关文章

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

    泛型 泛型是一种参数化数据类型,具有以下特点1:定义时不明确,使用时必须明确成 某种具体数据类型 的数据类型【泛型...

  • TS 泛型+装饰器

    typescript 中的泛型 泛型的定义泛型函数泛型类泛型接口 泛型:软件工程中,我们不仅要创建一致的定义良好的...

  • TypeScript 学习笔记4 泛型

    1.泛型 1.1 泛型函数 1.2 泛型类 1.3 泛型接口 Typescript从0到1-学习视频教程-培训课程...

  • Kotlin语言(六):泛型

    1、泛型类 2、泛型函数 3、泛型上限 4、泛型擦除 5、泛型投射 6、星号投射

  • 泛型的使用

    泛型有三种使用方式,分别为:泛型类、泛型接口、泛型方法 泛型类 泛型接口 泛型通配符 泛型方法 静态方法与...

  • 泛型

    1.什么是泛型? 2.为什么需要泛型? 3.泛型类、接口 泛型类注意事项: 从泛型类派生子类 泛型接口 泛型接口的...

  • Java 泛型

    一、泛型使用 1、泛型类 2、泛型函数 二、泛型限定符 1、泛型上限 泛型上限使用 extends 限制 多个限制...

  • 【Swift】泛型常见使用

    1、Swift泛型4种 泛型函数泛型类型泛型协议泛型约束 2、泛型约束3种 继承约束:泛型类型 必须 是某个类的子...

  • V语言学习笔记-14泛型

    目前的泛型主要有这三种:泛型结构体,泛型函数,泛型方法 泛型结构体 泛型函数 判断2个数组是否相等的泛型函数 泛型方法

  • Java泛型与Kotlin泛型

    Java泛型 学习并掌握泛型类和泛型接口定义和使用 学习并掌握泛型函数的定义和使用 很清晰明了的使用教程 Kotl...

网友评论

    本文标题:TS泛型类、泛型接口、泛型函数

    本文链接:https://www.haomeiwen.com/subject/jgqpdrtx.html