javascript - 如何使用 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 -核心值(value)。现在，所有变量都是 string已输入。
第二种方法，承认默认user值，但还为变量提供显式默认值

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

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

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

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