理解Typescript中的嵌套尖括号

我正在看一本关于Typescript的书，我正在努力弄清楚用“”制作的操作/铸件

例如，在下面的代码中，我不确定WrappedComponent的类型是什么

它是一个也有PropsWithChildren和initialState属性的ComponentType吗？我真的不知道怎么读

我应该如何解析它？谢谢你的帮助

import React, { PropsWithChildren, ComponentType } from 'react';
import { AppState } from './context/AppStateContext';

export const withData = (
  WrappedComponent: ComponentType<PropsWithChildren<{ initialState: AppState }>>
) => {
  // function code
};

import React，{PropsWithChildren，ComponentType}来自'React'；
从“./context/AppStateContext”导入{AppState}；
导出常数withData=(
WrappedComponent:ComponentType
) => {
//功能代码
};

尖括号之间的是传递给泛型的类型

考虑这一点的一种方法是查看JavaScript中的链式函数调用：

foo(bar(123))

上面的代码将

123

传递到

bar

，然后将调用的结果传递到

foo

。TypeScript中嵌套的尖括号做了类似的事情；内部类型首先求值，然后传递给外部泛型进行解析

那么这个,

export const withData = (
  WrappedComponent: ComponentType<PropsWithChildren<{ initialState: AppState }>>
) => {

---

结果

WrappedString

被解释为类型

{prop:string；}

谢谢！那确实有用！

type PropsWithChildrenIncludingState = PropsWithChildren<{ initialState: AppState }>;
type WrappedComponent = ComponentType<PropsWithChildrenIncludingState>;
export const withData = (
  WrappedComponent: WrappedComponent
) => {

type WrapInObject<T> = { prop: T };
type WrappedString = WrapInObject<string>;