将类型断言与解构赋值一起使用的最佳方法是什么？答案

【问题标题】：What's the best way to use a type assertion with destructuring assignment?将类型断言与解构赋值一起使用的最佳方法是什么？
【发布时间】：2021-08-08 16:20:01
【问题描述】：

我有一些使用destructuring assignment的代码如下：

const { values: project, setValues, submitForm } = useFormikContext();

根据TypeScript type assertion documentation，我想使用as 关键字告诉TS 编译器project 将始终是Project 类型。

这个的正确语法是什么？我试过了：

const { values: (project as Project), setValues, submitForm } = useFormikContext();

但那是无效的。

【问题讨论】：

通过查看at the implementation，我认为您应该改用useFormikContext<Project>()
谢谢@Teneff。这正是我想要的——当我现在在 VScode 中将鼠标悬停在 project 上时，我可以看到 project 的类型为 Project。您能否将其添加为答案并进一步解释其为何有效？是不是<FormikContextType<Values>> 把<Values> 变成了一个（类似变量的东西）来声明values 的类型？

标签： typescript formik destructuring type-assertion object-destructuring

【解决方案1】：

您可以使用以下语法来解决此问题：

const { values: project, setValues, submitForm }: { values: Project; setValues: SomeType1, submitForm: SomeType2} = useFormikContext();

您也可以创建另一个变量：

const { values: project, setValues, submitForm } = useFormikContext();
const a: Project = project;

【讨论】：

添加了一个简单的例子：codesandbox.io/s/voxzc
谢谢！我更喜欢第一个示例，因为它不会产生额外的变量。
是的，我也喜欢。我没有检查你的库中是否有类型。但我认为这个例子对于其他开发者来说更常见。
你是对的 - 我会将其标记为已接受，但如果他们写了答案，我会支持 @Teneff。

【解决方案2】：

由looking at the implementation 定义使用TypeScript Generics

export function useFormikContext<Values>() {
  const formik = React.useContext<FormikContextType<Values>>(FormikContext);

  return formik;
}

它会创建一个react context，如果您将钩子称为：

useFormikContext<Project>()

可能不仅值将是 Project 类型，而且 setValues 将只接受 Project 类型的对象（不幸的是没有使用该库）

【讨论】：

谢谢！这是我使用的答案，但我将另一个标记为已接受，因为其他人可能正在使用不使用泛型的库。