Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

TypeScript 基本泛型


泛型允许创建“类型变量”,可用于创建类、函数和类型别名,而无需显式定义其使用的类型。

泛型使编写可重用代码变得更容易。


函数

泛型与函数一起使用有助于创建更通用的方法,这些方法更准确地表示所使用和返回的类型。

示例

function createPair<S, T>(v1: S, v2: T): [S, T] {
  return [v1, v2];
}
console.log(createPair<string, number>('hello', 42)); // ['hello', 42]
自己试试 »

TypeScript 还可以从函数参数推断泛型参数的类型。


泛型可用于创建通用类,例如 Map

示例

class NamedValue<T> {
  private _value: T | undefined;

  constructor(private name: string) {}

  public setValue(value: T) {
    this._value = value;
  }

  public getValue(): T | undefined {
    return this._value;
  }

  public toString(): string {
    return `${this.name}: ${this._value}`;
  }
}

let value = new NamedValue<number>('myNumber');
value.setValue(10);
console.log(value.toString()); // myNumber: 10
自己试试 »

如果在构造函数参数中使用泛型参数,TypeScript 也可以推断其类型。


类型别名

类型别名中的泛型允许创建更可重用的类型。

示例

type Wrapped<T> = { value: T };

const wrappedValue: Wrapped<number> = { value: 10 };

这也可以使用以下语法与接口一起使用:interface Wrapped<T> {


w3schools CERTIFIED . 2022

获取认证!

完成 TypeScript 模块,进行练习,参加考试并成为 w3schools 认证专家!!

$45 报名

默认值

泛型可以分配默认值,如果未指定或推断其他值,则应用这些默认值。

示例

class NamedValue<T = string> {
  private _value: T | undefined;

  constructor(private name: string) {}

  public setValue(value: T) {
    this._value = value;
  }

  public getValue(): T | undefined {
    return this._value;
  }

  public toString(): string {
    return `${this.name}: ${this._value}`;
  }
}

let value = new NamedValue('myNumber');
value.setValue('myValue');
console.log(value.toString()); // myNumber: myValue

扩展

可以向泛型添加约束以限制允许的内容。约束使在使用泛型类型时能够依赖于更具体的类型。

示例

function createLoggedPair<S extends string | number, T extends string | number>(v1: S, v2: T): [S, T] {
  console.log(`creating pair: v1='${v1}', v2='${v2}'`);
  return [v1, v2];
}

这可以与默认值结合使用。


TypeScript 练习

通过练习测试自己

练习

完成泛型

function createPair, (x: typeX, y: typeY): [typeX, typeY] {
 return [x, y];
}
console.log(createPair<string, number>('Meaning', 42));

开始练习


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.