React+TypeScript中用prompt返回值更新State报ts(2345)错误如何解决？

• 浏览器原生prompt()方法的返回值类型本身就是string | null：用户点击弹窗确认按钮时返回输入的字符串，点击取消或者直接关闭弹窗时返回null。
• 初始化apiKey状态时你传入的初始值是空字符串''，TypeScript会自动推断该状态的类型为string，仅允许接收字符串类型的赋值。
• 直接将可能为null的prompValue传给setapiKey，两种类型不匹配，因此触发ts(2345)类型错误。

根据业务需求可以选择以下任意一种方案：

1. 空值兜底兼容
   用空值合并运算符对null值做兜底处理，用户取消输入时默认把状态设置为空字符串，和初始类型完全匹配：

const getApiKey = () => {
  const prompValue = prompt('Enter API Key');
  setapiKey(prompValue ?? '');
}

2. 显式声明状态允许null类型
   如果业务需要区分「未输入」「用户取消输入」「输入空内容」等不同状态，可以手动给状态声明联合类型：

// 显式指定apiKey的类型为string | null
const [apiKey, setapiKey] = useState<string | null>('');

修改后直接传入prompValue就不会触发类型报错，注意后续使用apiKey时如果依赖字符串类型的方法，需要提前做好非空判断。

3. 仅在有效输入时更新状态
   加一层非空判断，仅当用户确认输入内容的时候才更新状态，用户取消操作时保留原有状态值不变：

const getApiKey = () => {
  const prompValue = prompt('Enter API Key');
  if (prompValue !== null) {
    setapiKey(prompValue);
  }
}

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