TypeScript React能否在类型定义中设置依赖其他prop的默认值？

核心结论 #

你想要的在TestProps类型定义中直接设置依赖其他prop的动态默认值无法实现。TypeScript的类型系统仅作用于编译阶段，运行时会被完全擦除，无法持有运行时才能计算得到的动态值（比如testArray的长度）。

推荐优雅实现方案 #

直接在组件参数解构时指定默认值即可，写法简洁且符合React开发规范：

// 类型定义保持number为可选
type TestProps = {
    testArray: Array<string>,
    number?: number
}

// 组件参数解构时直接指定默认值
function TestComponent({ testArray, number = testArray.length }: TestProps) {
    // 此处number的类型会被TS自动推导为number，无需额外做undefined判断
    // 你的组件逻辑
}

该写法完全匹配你的需求：父组件传入number时使用传入值，未传入时自动取testArray.length作为默认值。

补充注意 #

你原来直接修改props对象的写法不符合React单向数据流原则，props为只读属性，直接给props.number赋值在严格模式下会触发运行时错误，上述解构写法不会修改原props对象，不存在该问题。

另外你示例中父组件传入的testArray是number类型数组，和TestProps中定义的Array<string>类型不匹配，开发时请注意对齐类型。

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