angular - 如何理解复杂的 TypeScript 泛型类型？

Question

我正在检查 RxJS api 文档。我总是在理解写在上面的奇怪语法时遇到问题，如下所示:

combineLatest<O extends ObservableInput<any>, R>(...observables: (O | ((...values: ObservedValueOf<O>[]) => R) | SchedulerLike)[]): Observable<R>

我想了解这种语法并进一步自己编写。

所以，如果有人能解释上面例子中发生的事情，那将会很有帮助。

Answer 1

function combineLatest<O extends ObservableInput<any>, R>(...observables: (O | ((...values: ObservedValueOf<O>[]) => R) | SchedulerLike)[]): Observable<R>

让我们分解一下。

好的，这是一个函数

function combineLatest(args): Result

接受一些参数并返回 Result 类型的结果

但它也是一种特殊的函数，称为generic职能。泛型的目的是在成员之间提供有意义的类型约束。

function combineLatest<T>(args): Result
                      /\
           now it's a generic function

T这是一个类型变量，它允许我们捕获用户提供的类型，以便我们以后可以使用该信息。例如，我们可以使用 T作为返回类型:

function combineLatest<T>(args): T

以便进行以下调用:

combineLatest<string>(someParams) // returns `string`

将为我们提供 string 类型的结果因为我们明确设置了 T成为string .

我们也可以使用 T函数的任何参数的类型变量。

function combineLatest<T>(arg: T): T

现在我们可以使用类型参数推断:

combineLatest('someStr') // returns `string`

也就是说，我们告诉编译器设置 T 的值根据我们传入的参数类型自动为我们提供服务。我们已经传递了一个 string。这样我们就有了一个string .

我们可以根据需要使用任意数量的类型变量。我们也可以随意调用它们。

function combineLatest<Type1, Type2, ...>(...)

泛型很棒，有时我们想用我们传入的参数做一些 Action :

function combineLatest<T>(arg: T): T {
  arg.name = arg.name.toLowerCase(); // Property 'name' does not exist on type 'T'
  return arg;
}

如您所见，编译器无法理解 arg 的类型。 .为了解决这个问题，我们可以为我们的 T 表示约束在 extends 的帮助下键入变量运算符(operator):

interface ItemWithName {
  name: string;
}
function combineLatest<T extends ItemWithName>(arg: T): T {
  arg.name = arg.name.toLowerCase();
  return arg;
}

现在编译器知道 arg 有 name string的属性(property).

---

现在让我们回到最初的声明:

combineLatest<O extends ObservableInput<any>, R>(...): Observable<R>

我们可以看到这个函数使用了两个类型变量:

• O代表 Observable 的类型变量。它被限制为 ObservableInput<any> 的类型
• R代表结果

combineLatest 的结果功能应该是Observable类型 R .例如，我们可以通过像这样调用此函数来强制使用该类型:

combineLatest<any, MyClass>(...)  // returns Observable<MyClass>

现在让我们看看这个函数可以接受的参数:

...observables: (O | ((...values: ObservedValueOf<O>[]) => R) | SchedulerLike)[]

我们可以看到rest parameters运营商在这里。让我们简化上面的表达式，想象一下:

...observables: CombinedType[]

这意味着 combineLatest函数可以接受零个和多个参数，这些参数稍后将聚集到一个变量中 observables .

combineLatest();                 // without parameters
combineLatest(obs1);             // one parameter
combineLatest(obs1, obs2, ..etc) // many parameters

那么这个参数的类型是什么

           CombinedType

O | ((...values: ObservedValueOf<O>[]) => R) | SchedulerLike

可以是:

• O 的类型类型变量被限制为 ObservableInput<any> 的类型我们之前讨论过

• 或它可以是函数(...values: ObservedValueOf<O>[]) => R它采用零个或多个 ObservedValueOf<O> 类型的参数并返回 R类型变量类型。请注意，此返回类型可用于推断 combineLatest 的返回类型功能。

• 或它可以是SchedulerLike的类型界面。

---

我认为如果将 TypeScript 类型声明拆分成小块，理解它们应该没有任何问题。