TypeScript - 泛型

查看更多资源

1. 基础：

/**
 * 泛型:
 *  1. 很多时候，类型是写死的，这样就不利于复用,就需要给类型这种值也可以设置变量
 *  2. <类型变量名>，一般系统使用单字母大写，比如 T,E...
 *  3. 写在函数名，参数列表之间，这是函数的
 */

/* 4. 定义函数 泛型 <T>  */
function fn1<T>(x: T): number {
  return Number(x) * 10;
}
fn1<number>(1);  // 在调用函数时，约束参数类型
fn1<string>('a');

function fn3<T>(arg: T[]): T[] {
  return arg;
}
fn3<string>(['1', '2']);
fn3<number>([1, 2]);

/* 5. 定义函数 泛型 <T,S> */
function fn2<T, S>(arg1: T, arg2: S): [T, S] {
  return [arg1, arg2]
}
let a = fn2<string, number>('a', 1); // 在调用函数时，约束参数类型

// let arr: number[] = [];
// let arr2: Array<number> = [];

2. 类：

class MyArray<T>{
  private _data: T[] = []; // 数组 元素类型 由调用时决定

  constructor() { }

  public mypush(v: T): number {
    this._data.push(v);
    return this._data.length;
  }

}

/* 对于arr1这个实例对象来讲，里面的T就是string */
let arr1: MyArray<string> = new MyArray();
arr1.mypush('1');

/* 对于arr2这个实例对象来讲，里面的T就是number */
let arr2: MyArray<number> = new MyArray();
arr2.mypush(1)

3. 泛型类型：

/* 1. 定义函数类型 */

// fn1 fn2 中的 参数类型 只能是 number
let fn1: (x: number, y: number) => number = function (x, y) {
  return x + y;
}

interface IsFn {
  (x: number, y: number): number
}

let fn2: IsFn = function (x, y) { return x + y }

/* 2. 泛型类型 -> 参数类型 在调用时 决定 */

let fn3: <T>(x: T, y: T) => number = function (x, y) {
  return Number(x) + Number(y)
}
fn3<number>(1, 2);  // 参数类型 在调用时 决定
fn3<string>('1', '2');


/* 3. 泛型接口 */

interface aFn<T>{
  (x:T,y:T):T
}

let fn4:aFn<string> = function(x,y){return x+y}; // 参数类型 在调用时 决定
let fn5:aFn<number> = function(x,y){return x+y};

4. 类类型：

/*
* 1. {new()} ： 约束 函数的参数 是一个构造函数
*
*/

// 函数的 参数  是一个 Array<string> 类型的 构造函数
function getObj(constructor: { new(): Array<string> }) {
  return new constructor(); // 返回一个实力对象
}

let arr = getObj(Array); // 等同于 arr：string[] = new Array()

// 扩展 window对象的 属性
interface Window {
  a: string
}
window.a = 'aaa'

5. 泛型约束：

// 函数fn1的参数类型为 泛型T,但是 约束了 泛型T 属于 HTMLElement，不能是其他类型

function fn1<T extends HTMLElement>(a: T) {
  a.querySelector('div')
}


// 函数fn2的参数类型 是泛型T，但是 约束了 泛型T 必须有 length:number
interface Len {
  length: number
}

function fn2<T extends Len>(a: T) {
  console.log(a.length)
}

fn2({
  a: 1,
  length: 9,  // 接口 约束 泛型，必须有length
})