TypeScript中可选链与if判断处理null值哪种更优？

两种写法都是语法正确且能实现需求的，具体选择取决于代码风格和后续逻辑的扩展性：

1. 可选链操作符（?.）的特点 #

• 代码极简，一行完成空值判断与方法调用，适合逻辑单一的场景（比如你例子里仅需调用focus()的情况）
• 本质是「静默忽略空值」：如果inputRef.current为null/undefined，整个表达式直接返回undefined，不会执行后续的.focus()，也不会抛出错误
• 局限性：如果需要在空值时执行额外逻辑（比如打印日志、触发降级处理），这种写法无法直接扩展

2. if判断的特点 #

• 逻辑更显式：一眼就能看到「空值时提前返回」的处理逻辑，可读性更强，尤其适合团队协作场景
• 扩展性好：后续如果要在空值分支添加额外操作（比如提示用户、记录错误），直接在if块内补充代码即可
• 小缺点：对于简单调用来说，代码行数略多，显得有些冗余

具体选择建议 #

• 若只是单纯调用方法，无额外空值处理需求，选可选链写法更清爽
• 若需要空值分支的扩展能力，或希望代码的空值处理逻辑更直观，选if判断写法更合适

代码示例1（可选链写法） #

useEffect(() => {
    inputRef?.current?.focus();
}, []);

代码示例2（if判断写法） #

useEffect(() => {
    if (!inputRef.current) {
      return;
    }
    inputRef.current.focus();
}, []);

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