'Unexpected token, expected ")"' on catch block when adding Typescript to ReactJS project?

I'm converting a ReactJS project to use Typescript. When I compile the project, on the catch block in try/catch statements,

...
} catch (e: any) {
      console.log(e);
    }

I get the following error

Syntax error: Unexpected token, expected ")" (243:15)

  241 |         ...
  242 |       });
> 243 |     } catch (e: any) {
      |               ^
  244 |       console.log(e);
  245 |     }
  246 |   };

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "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"
  },
  "include": ["src"]
}

This project was created using create-react-app.

I'm not sure how to troubleshoot this. The only option I have right now, is to remove the (e:any), and have a generic error message.

Any help on this would be greatly appreciated. This is the first time I'm converting a ReactJS project to use Typescript.

Thank you!


You cannot put type annotation in catch block as you don't know what error will be thrown.

Workaround is to use instanceof to check which error you got

catch (e) {
  if(e instanceof RangeError) {
    // e is now RangeError
  } else if (e instanceof TypeError) {
    // e is now TypeError 
  } else {
    // anything else
  } 
}

Source: https://fettblog.eu/typescript-typing-catch-clauses/