ESLint with typescript "Parsing error: Type expected" with Template Literal Types

Question

I have this type:

export type ICfnOutput = {
    ENDPOINTS: {
        [key in `${keyof typeof MSERVICES}_ENDPOINT`]: string
    },
    USER_POOL_CLIENT_ID: string,
    amplifyClientUrl: string,
    USER_POOL_ID: string
}

When I run the command:

eslint .  --ext .ts

I get the following error:

error  Parsing error: Type expected

.eslintrc.json

{
    "env": {
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {}
}

Im using eslint v8.21.0, how can I avoid this, or should I ignore it and add an ignore command because seems to be an eslint problem

The code is working fine is just when I lint eslint takes it as an error.

Answer 1

Resolved in the comments:

I see and double checked and the problem was the typescript version, Im using the aws cdk and apparently by default install typescript v3.9.7. —Woohaik

Template literal types were introduced in TypeScript 4.1, so ESLint was correctly flagging that this syntax was unexpected.

It was helpful to debug this through the use of the Typescript-ESLint Playground.