使用GitHub Actions部署React应用到Azure时出现TypeScript报错如何解决？

问题根因 #

1. 你项目中使用的TypeScript版本为3.6.3，而@types/invariant的较新版本使用了TypeScript 3.7才支持的断言签名语法，版本不兼容导致编译抛出TS1005错误。
2. 额外存在两个非核心但可能引发后续问题的配置错误：
   • GitHub Actions YAML配置中Node.js版本声明冲突：env块定义的NODE_VERSION为10.x，实际setup-node步骤使用的是14.x，版本不统一可能引发依赖安装异常
   • tsconfig.json末尾存在语法错误，exclude数组后多了一个多余的闭合方括号

解决方案 #

方案一：锁定兼容的类型定义版本（改动最小，适合快速修复） #

直接安装适配TypeScript 3.6.x的@types/invariant版本，在项目根目录执行以下命令：

npm install @types/invariant@2.2.3 --save-dev

执行完成后本地运行npm run build验证无报错后，再推送代码触发GitHub Actions即可。

方案二：升级TypeScript版本（推荐，适合长期维护） #

升级项目TypeScript到3.7及以上稳定版本，即可兼容新版类型定义的语法，执行命令：

npm install typescript@3.9.10 --save

该版本为3.x分支的稳定终版，兼容性更好，改动风险更低。

额外配置修复 #

1. 统一GitHub Actions的Node.js版本，修改YAML文件的env块：

env:
  AZURE_WEBAPP_NAME: Portal-Test 
  AZURE_WEBAPP_PACKAGE_PATH: "build" 
  NODE_VERSION: "14.x" # 和下方setup-node步骤的版本保持一致

2. 修复tsconfig.json的语法错误，删除末尾多余的方括号，修改后最后几行为：

"include": ["src"],
  "exclude": ["node_modules", "lib"]
}

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