如何在打字稿中编写 removeError rest destructure 函数

Question

我想编写一个函数，它可以从对象中删除具有特定名称的键（用例在反应中，我想在聚焦字段时设置新的错误状态

我是这样写的javascript

removeError = (fieldName) => {
    const { error } = this.state;
    if (error) {
      const { [fieldName]: ommited, ...rest } = error;
      this.setState({ error: rest });
    }
  };

如果我用打字稿写-如何写这行：

const { [fieldName]: ommited, ...rest } = error;

Answer 1

Typescript 是 javascript 的超集，因此任何 javascript 代码在 typescript 中都是有效的，但您可能需要声明类型以删除警告。

我怀疑您的状态类型不正确，这就是您遇到错误的原因，但如果没有看到您的那部分代码就很难说。

无论哪种方式，通过设置正确的类型，您应该能够使您的代码编译得很好，请参见此示例：

type State = {error?: Record<string, string>};
let state: State = {};
const setState = (state: State) => undefined;

const removeError = (fieldName: string) => {
    const { error } = state;
    if (error) {
      const { [fieldName]: ommited, ...rest } = error;
      setState({ error: rest });
    }
  };

在 typescript playground 中亲自查看。

注意：为了这段代码片段的目的，我只是模拟了反应状态。

Answer 2

要执行此操作，状态中 error 对象的类型必须使其所有属性都为可选，如下所示：

interface ExampleState {
    error?: {       // <== This doesn't have to be optional, but from your code it is
        a?: string; // ***
        b?: string; // *** These have to be optional
        c?: string; // ***
    }
}

（您也可以使用 Record<string, string> 或类似的 Error，但它不会是类型安全的。）

然后定义使用 keyof ExampleState["error"] 给 fieldName 正确的类型，其余的和你的差不多（我修复了“省略”的拼写）：

removeError = (fieldName: keyof ExampleState["error"]) => {
    this.setState(({error}) => {
        if (error) {
            const { [fieldName]: omitted, ...rest } = error;
            return { error: rest };
        }
        return null;
    });
};

请注意，由于我们是根据现有状态设置状态，因此最好使用 setState

的回调形式

Playground link

如何在打字稿中编写 removeError rest destructure 函数

How to write a removeError rest destructure function in typescript

typescript

destructuring