如何使用 Typescript 对具有后备值的解构对象进行类型检查？

Question

如何对以下结构中的解构对象进行类型检查？interface IUser  {    username: string    image: string    uid: string}interface IDataProp {    user: IUser}const {    user: {        username,        image,        uid    } = {},} = { ...data, user: data.user || {} }

Answer 1

嗯，这是一个奇怪的场景，很难涵盖。

我真的不明白你为什么要解构data对象并user用值来实现键data.user。

编译错误（或类型误导）存在于默认值中。由于分配没有应用于强类型对象，因此提供了一个空对象的默认值{}，所有变量都必须有一个默认值（甚至是显式的undefined，取决于tsconfig.json）。

我想有两种方法。

const {

    user: {

        username,

        image,

        uid

    }

} = { user: data.user || {} };

没有默认user的 -key 值。现在，所有变量都已string键入。

第二种方法，承认默认user值，但也为变量提供显式默认值

const {

    user: {

        username = undefined,

        image = 'default-image',

        uid = '000-000-0'

    } = {}

} = { user: data.user || {} };

它有点多余，在这种情况下，它是usernameunion 类型string | undefined……所以它是一个很弱的类型。

在带有 Typescript 环境的 VSCode 中，如果您将user键悬停在上面，编译器现在可以理解它是user?: IUsertype的可选属性IUser。这就是为什么我们必须提供默认值。

最后，正如我在上面评论的那样，我发现这种情况有点奇怪。data.user即使使用提供强类型解构的 void null 检查，您也可以简单地解构对象。

const {

    username,

    image,

    uid

}: IUser = { ...data.user || {} };