Parsing error: Unexpected token, expected "," / typescript 'as' keyword not recognized

Question

I want to blur the input element when enter is pressed, but since e.target does not contain blur() method I want ts to consider it as a HTMLInputElement (or pretty much anything that would compile). But I get a compilation error:

src/components/EditableLabel.tsx
  Line 50:31:  Parsing error: Unexpected token, expected ","

  48 |             onKeyDown={e => {
  49 |                 if (e.key === 'Enter') {
> 50 |                     (e.target as HTMLInputElement).blur();
     |                               ^
  51 |                     clearSelection();
  52 |                 }
  53 |             }}

How can I make it work?

edit: Here's the whole component as requested, also modified a bit for other purposes

import { useEffect, useRef } from 'react';

interface ELProperties {
    editMode: boolean;
    setEditMode: React.Dispatch<React.SetStateAction<boolean>>;
    setValue: React.Dispatch<React.SetStateAction<string>>;
    focus?: boolean;
    exitOnBlur?: boolean;
    maxDigits?: number;
    other?: any;
}

// Returns an input which allows to be editable when in edit mode
export function EditableLabel({
    editMode,
    setEditMode,
    setValue,
    focus = false,
    exitOnBlur = false,
    maxDigits,
    ...other
}: ELProperties): JSX.Element {
    const element = useRef<HTMLInputElement>(null);

    // clear all text selection
    const clearSelection = () => {
        window.getSelection()?.removeAllRanges();
    };

    // focus on input if in edit mode, otherwise clear selection
    useEffect(() => {
        if (focus && element.current) {
            element.current.focus();
            element.current.select();
        } else clearSelection();
    }, [editMode]);

    return (
        <input
            ref={element}
            type='text'
            spellCheck='false'
            disabled={!editMode}
            onChange={e => {
                const value = e.target.value;
                if (!maxDigits || value.length <= maxDigits) setValue(value);
            }}
            onKeyDown={e => {
                if (e.key === 'Enter') {
                    (e.target as HTMLInputElement).blur();
                    clearSelection();
                }
            }}
            onBlur={() => {
                if (exitOnBlur) setEditMode(false);
            }}
            {...other}
        />
    );
}

edit: I've got the same error using 'as' keyword in the other parts of code too so it's probably not related to the component, here's the config file:

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

edit: Ts throws every time I use 'as' keyword anywhere in my code, example below. The project uses CRA and webpack, . tsconfig was automatically generated.

let t: any = 123;
console.log(t as number);
// Produces the same error

Answer 1

Remove the outermost brackets on what you are assigning to onKeyDown , ie

  56 |             onKeyDown = e => {
  57 |                 if (e.key === 'Enter') {
  58 |                     (e.target as HTMLInputElement).blur();
  59 |                     setEditMode(false);
  60 |                 }
  61 |             }