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

如何对以下结构中的已分解对象进行类型检查？

interface IUser  {
    username: string
    image: string
    uid: string
}

interface IDataProp {
    user: IUser
}

const {
    user: {
        username,
        image,
        uid
    } = {},
} = { ...data, user: data.user || {} }

最佳答案

好吧，这是一个奇怪的场景，很难解决。
我不太了解为什么您要破坏data对象并用user值实现data.user键。
编译错误（或类型令人误解）位于默认值中。由于该赋值未应用于强类型对象，因此提供的默认值是空对象{}，因此所有变量都必须具有默认值（甚至是显式的undefined，具体取决于tsconfig.json）。

我猜有两种方法。

const {
    user: {
        username,
        image,
        uid
    }
} = { user: data.user || {} };

没有默认的user键值。现在，所有变量都是string类型。
第二种方法，接受默认的user值，但也为变量提供明确的默认值

const {
    user: {
        username = undefined,
        image = 'default-image',
        uid = '000-000-0'
    } = {}
} = { user: data.user || {} };

这有点多余，在这种情况下，username的类型为union string | undefined ...，所以它是一个弱类型。
在带有Typescript环境的VSCode中，如果将鼠标悬停在user键上，则编译器现在可以理解，它是类型为user?: IUser的可选属性IUser。这就是为什么我们必须提供默认值的原因。

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

const {
    username,
    image,
    uid
}: IUser = { ...data.user || {} };

关于javascript - 如何使用Typescript对具有后备值的结构化对象进行类型检查？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61071950/