first([1,2,3]) 经泛型处理返回 numbe"> first([1,2,3]) 经泛型处理返回 numbe"> first([1,2,3]) 经泛型处理返回 numbe">
TypeScript 词条目录
前端Wiki/TypeScript/进阶/泛型

泛型基础

泛型是"类型的参数":写函数时不定死类型,调用时再确定。first([1,2,3]) 经泛型处理返回 number、first(['a']) 返回 string,而不是退化为 any。泛型让类型信息在数据流动中不丢失。

<T> 是类型参数,写在函数名、接口名、类名之后。调用时通常可以省略(由实参推断),只有推断不准时才显式传。接口与类同样可以有泛型参数。

  • 泛型 = 类型的形参,调用时才确定具体类型
  • 能推断就别显式写:first(arr) 而非 first(arr)
  • 泛型保留"进什么出什么"的类型关系,是 any 的正确替代
TS
// 没有泛型:返回 any,类型信息丢失
function firstAny(arr: any[]): any { return arr[0]; }

// 有泛型:进 number[] 出 number,进 string[] 出 string
function first<T>(arr: T[]): T { return arr[0]; }
const n = first([1, 2, 3]);      // number
const s = first(['a', 'b']);     // string

// 泛型接口
interface Box<T> { value: T }
const box: Box<string> = { value: '礼物' };

// 泛型类
class Stack<T> {
  private items: T[] = [];
  push(v: T) { this.items.push(v); }
  pop(): T | undefined { return this.items.pop(); }
}
const st = new Stack<number>();   // 也可写成 new Stack() 由初始化推断
JS
// 泛型与私有修饰符都被编译掉
function first(arr) { return arr[0]; }
console.log(first([1, 2, 3]));    // 1
console.log(first(['a', 'b']));   // a

class Stack {
  constructor() { this.items = []; }
  push(v) { this.items.push(v); }
  pop() { return this.items.pop(); }
}
const st = new Stack();
st.push('hello');
console.log(st.pop());            // hello
本节要点泛型保留类型关系:进什么类型出什么类型,是 any 的正确替代品。
🔗 相关词条JavaScript闭包Promise