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
的 -key 值。现在,所有变量都已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
type的可选属性IUser
。这就是为什么我们必须提供默认值。
最后,正如我在上面评论的那样,我发现这种情况有点奇怪。data.user
即使使用提供强类型解构的 void null 检查,您也可以简单地解构对象。
const {
username,
image,
uid
}: IUser = { ...data.user || {} };
推荐阅读
- javascript - 想要根据按键在多个内容可编辑的 div 之间移动光标
- javascript - 如何在ajax调用的成功部分加载javascript文件
- plugins - java.lang.IllegalArgumentException:尝试从扩展向导运行多页编辑器后找不到 IDadditions
- python - 将列中的长列表转换为新的df
- android - RecyclerView中的按钮无法点击或选择
- linux - 从默认致命信号的信号处理程序返回
- python - 检查 python 列表是否遵循特定的重复模式
- python-3.x - Databricks python notebook 执行的日志文件
- mongodb - Mongodb - $in 模拟查询 AND,而不是 OR
- java - 为什么 SimpleJdbcCall igronre @Transactional 注解