TypeScript为何对已设置默认值的可选参数报未定义错误？

报错原因 #

你给整个args参数对象设置的默认值仅在完全不传入args时生效。如果调用时传入了带部分属性的args（比如renderTestComponent({ enterDetails: true })），整个默认args对象会被覆盖，未主动传入的config属性就会变成undefined，因此TypeScript会判定args.config存在undefined的可能性。

解决方案 #

调整参数解构规则，给args的单个属性分别设置默认值，同时保留你需要的所有调用方式：

import React, { createContext } from 'react';

enum Permission {
    Read = 'Read',
    Write = 'Write',
}

type Configuration = Partial<Record<Permission, boolean>>;

export const UiConfigContext = createContext<Configuration | null>(null);

// 调整参数写法
function renderTestComponent({
    config = { [Permission.Read]: true },
    enterDetails = false
}: {
    config?: Configuration;
    enterDetails?: boolean;
} = {}) {
    // 补充return，否则JSX不会被正常返回
    return (
        <UiConfigContext.Provider value={config}>
            Test
        </UiConfigContext.Provider>
    )
}

修改后你要求的四种调用方式全部支持：

• renderTestComponent()
• renderTestComponent({ config: { [Permission.Read]: true } })
• renderTestComponent({ enterDetails: true })
• renderTestComponent({ config: { [Permission.Read]: true }, enterDetails: true })

可选备选方案 #

如果你不想调整参数结构，也可以在给Provider传值时做空值合并处理，直接兜底undefined的情况：

<UiConfigContext.Provider value={args.config ?? { [Permission.Read]: true }}>

内容的提问来源于stack exchange，提问作者LazioTibijczyk