typescript - 在 TypeScript 中扩展和接口(interface)并将其设置为等于某些东西(泛型)？

Question

我在库中遇到了类型声明 react-router这让我很难理解:

export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
> {
    ...
}

泛型的第一行对我来说是最难的。我希望得到一些帮助......

Params extends { [K in keyof Params]?: string } = {}

据我了解，我们正在使用一些名为 Params 的接口(interface)。作为参数，然后我们使该接口(interface)中的每个元素都是可选的。所以，我们正在操作传入的接口(interface)。

我也很难理解等号 = {} .扩展接口(interface)并将其设置为等于什么是什么意思？谢谢!

Answer 1

参数泛型的解释
Params extends { [K in keyof Params]?: string } = {}
这意味着 Params需要是一个对象(键-> 值映射)，它的所有属性都是可选的，所有这些属性都是 string 的类型. {}当我们不输入参数时，表示默认类型。我说属性可以，但不一定是可选的，如 extends你可以读成 is assignable to ，因此例如具有所需的所有/某些属性的对象将符合该要求。考虑:

// function which has Params property
const f = <Params extends { [K in keyof Params]?: string } = {}>(p: Params) => p;
type A = {
    a: string // required field
}
f({ a: 'str' } as A) // is ok, pass the interface
type B = {
    b?: string // not required field
}
f({} as B) // is ok pass the interface

所以真的 Params表示任何具有字符串属性的对象，无论是否需要。这也意味着空对象 {}可以使用，因为我们不需要任何属性。

其他泛型的解释

下一行相当简单:

C extends StaticContext = StaticContext

输入 C需要可分配给类型 StaticContext ，因此需要具有 StaticContext 的所有属性如果我们假设它是一个对象

S = H.LocationState

输入 S可以是任何东西，但如果不提供，则默认为 H.LocationState