使用React+TypeScript时Intl.LocalesArgument报错求助

我在React+TypeScript环境下编写类型化函数，需要给Date.toLocaleString传递参数，但使用Intl.LocalesArgument类型时出现报错：

Namespace 'Intl' has no exported member 'LocalesArgument'

我已经尝试将tsconfig.json中的target改为es2020并重启开发服务器，但问题仍未解决。当前tsconfig.json配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "useUnknownInCatchVariables": false
  },
  "include": [
    "src"
  ]
}

解决办法 #

• 检查并升级TypeScript版本：Intl.LocalesArgument是TypeScript 4.6及以上版本才新增的类型定义。在终端执行tsc --version查看当前版本，若低于4.6，升级到最新稳定版即可解决类型找不到的问题。
• 完善lib配置：在compilerOptions.lib数组中添加es2020.intl，确保Intl相关的完整类型被引入。修改后的lib配置如下：

  "lib": [
    "dom",
    "dom.iterable",
    "esnext",
    "es2020.intl"
  ]
  

• 临时替代方案：如果暂时无法升级TS版本，可以直接用string | string[]作为locales参数的类型——因为Intl.LocalesArgument本质就是该类型的别名，完全兼容Date.toLocaleString的参数要求。示例代码：

  const formatDate = (date: Date, locales: string | string[]) => {
    return date.toLocaleString(locales);
  };
  

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