TypeScript部分接口对象

小编典典

TypeScript部分接口对象

reactjs

在React中，Component定义看起来像这样：

class Component<S> {
    state:S;
    setState(state:S):void;
}

然后定义一个这样的组件：

interface MyState {
    name: string;
    age: number;
}
class MyComponent extends Component<MyState> { }

现在我遇到的问题是，在React API setState中应该使用局部状态对象来调用，该对象表示要更新的属性，如下所示：

setState({name: "Aaron"});

请注意，age未声明。我的问题是TypeScript不允许这样做，它给出了类似的赋值错误Property 'age' is missing。据我了解，从react.d.ts这个意义上讲，定义是错误的。但是有解决方案吗？

我尝试了这个：

setState({name: "Aaron"} as MyState);

但这会产生相同的错误，即使它在Playground中运行时也不会给出错误。为什么在操场上能用？有任何想法吗？

阅读 319

2020-07-22

共1个答案

小编典典

该react.d.ts定义确实是错误的，只有在支持Partial
Types之前，才能将其固定。

问题在于，setState需要采用部分状态，这是与正常状态不同的类型。您可以通过手动指定两种类型来解决此问题：

interface MyState {
    name: string;
    age: number;
}

interface PartialMyState {
    name?: string;
    age?: number;
}

并手动声明MyComponent而不扩展提供的React Component类：

class MyComponent {
    state: MyState;
    setState(state:PartialMyState): void;
    //...
}

这意味着您必须为Component代码中的每个子类重复这些函数定义。您可以通过定义Component由附加的部分状态类型概括的正确类来避免这种情况：

class CorrectComponent<S,P> { // generalized over both state and partial state
    state:S;
    setState(state:P):void;
    //...
}

class MyComponent extends CorrectComponent<MyState,PartialMyState> { }

您仍然必须为每种状态类型编写部分版本。

另外，您可以通过将setState非参数类型的参数类型更改为来使其安全Object。

2020-07-22