ESLint+TypeScript模板字面量类型报‘Parsing error: Type expected’

问题原因 #

你使用的${keyof typeof MSERVICES}_ENDPOINT这种模板字面量映射类型是TypeScript 4.1+的特性，但当前你的@typescript-eslint/parser版本可能过低，无法支持该语法，导致ESLint抛出解析错误。ESLint v8.21.0需要搭配对应版本的@typescript-eslint工具链（v5.x系列）才能兼容TS 4.1+的语法特性。

解决方案 #

1. 升级@typescript-eslint相关依赖 #

确保@typescript-eslint/parser和@typescript-eslint/eslint-plugin的版本与ESLint v8.21.0兼容，推荐安装v5.30.0版本（与ESLint 8.21.0同期发布，兼容性最佳）：

npm install @typescript-eslint/parser@^5.30.0 @typescript-eslint/eslint-plugin@^5.30.0 --save-dev

或者使用yarn：

yarn add @typescript-eslint/parser@^5.30.0 @typescript-eslint/eslint-plugin@^5.30.0 --dev

2. 确认TypeScript版本 #

确保你的项目TypeScript版本在4.1及以上（该特性的最低要求），可以通过以下命令查看：

tsc -v

如果版本过低，同步升级TypeScript：

npm install typescript@^4.1.0 --save-dev

3. 临时规避（不推荐） #

如果暂时无法升级依赖，可以在ESLint配置中忽略该文件的解析错误，但这只是治标不治本的方法：

• 在.eslintignore中添加对应文件路径；
• 或者在代码顶部添加注释：

// eslint-disable-next-line
export type ICfnOutput = {
    ENDPOINTS: {
        [key in `${keyof typeof MSERVICES}_ENDPOINT`]: string
    },
    USER_POOL_CLIENT_ID: string,
    amplifyClientUrl: string,
    USER_POOL_ID: string
}

验证 #

重新运行ESLint命令：

eslint . --ext .ts

此时解析错误应该会消失。

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