I'm trying to add keyboard functionality to my snake game project using typesript, but getting errors on line 42 and 43 of code, which are:

1. On hovering over "window", I get:

Parsing error: ';' expected.eslint Unexpected keyword or identifier.ts(1434)

2. On hovering over ".addEventListener", I get:

Function implementation is missing or not immediately following the declaration.ts(2391)

3)On hovering over "window" of 2nd line, there is an additional error of:

Duplicate identifier 'window'.ts(2300)

interface keyUtil{
    value:string,
    isDown:boolean,
    isUp:boolean,
    press:undefined|any,
    release:undefined|any
}

export class keyboard implements keyUtil{    
    // privatethis:object = {};
    constructor(public value:string, public isDown:boolean, public isUp:boolean, public press:any, public release:any){
        this.value = value;
        this.isDown = false;
        this.isUp = true;
        this.press = undefined;
        this.release = undefined;
    }
    
    downHandler = (event: KeyboardEvent) => {
        if (event.key === this.value) {
            if (this.isUp && this.press) this.press();
            this.isDown = true;
            this.isUp = false;
            event.preventDefault();
        }
    };

    
    upHandler = (event: KeyboardEvent) => {
        if (event.key === this.value) {
            if (this.isDown && this.release) this.release();
            this.isDown = false;
            this.isUp = true;
            event.preventDefault();
        }
    };

    
    const downListener = this.downHandler.bind(this);
    const upListener = this.upHandler.bind(this);
    
    //Error on following two lines:  
    window.addEventListener(type: "keydown", downListener:any):void;
    window.addEventListener(type: "keyup", upListener:any):void;
    

    unsubscribe = () => {
        window.removeEventListener("keydown", this.downListener);
        window.removeEventListener("keyup", this.upListener);
    };
}

Solutions I tried were to modify the tsconfig file's noImplicitAny property to false. As I had coded the function in js, I was trying to convert the file to ts. Here is the js code:

function keyboard(value) {
    let key = {};
    key.value = value;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;
    
    key.downHandler = event => {
        if (event.key === key.value) {
            if (key.isUp && key.press) key.press();
            key.isDown = true;
            key.isUp = false;
            event.preventDefault();
        }
    };

    
    key.upHandler = event => {
        if (event.key === key.value) {
            if (key.isDown && key.release) key.release();
            key.isDown = false;
            key.isUp = true;
            event.preventDefault();
        }
    };

    
    const downListener = key.downHandler.bind(key);
    const upListener = key.upHandler.bind(key);

    window.addEventListener(
        "keydown", downListener, false
    );
    window.addEventListener(
        "keyup", upListener, false
    );

    
    key.unsubscribe = () => {
        window.removeEventListener("keydown", downListener);
        window.removeEventListener("keyup", upListener);
    };

    return key;
}

I'm trying to add keyboard functionality to my snake game project using typesript, but getting errors on line 42 and 43 of code, which are:

1. On hovering over "window", I get:

Parsing error: ';' expected.eslint Unexpected keyword or identifier.ts(1434)

2. On hovering over ".addEventListener", I get:

Function implementation is missing or not immediately following the declaration.ts(2391)

3)On hovering over "window" of 2nd line, there is an additional error of:

Duplicate identifier 'window'.ts(2300)

interface keyUtil{
    value:string,
    isDown:boolean,
    isUp:boolean,
    press:undefined|any,
    release:undefined|any
}

export class keyboard implements keyUtil{    
    // privatethis:object = {};
    constructor(public value:string, public isDown:boolean, public isUp:boolean, public press:any, public release:any){
        this.value = value;
        this.isDown = false;
        this.isUp = true;
        this.press = undefined;
        this.release = undefined;
    }
    
    downHandler = (event: KeyboardEvent) => {
        if (event.key === this.value) {
            if (this.isUp && this.press) this.press();
            this.isDown = true;
            this.isUp = false;
            event.preventDefault();
        }
    };

    
    upHandler = (event: KeyboardEvent) => {
        if (event.key === this.value) {
            if (this.isDown && this.release) this.release();
            this.isDown = false;
            this.isUp = true;
            event.preventDefault();
        }
    };

    
    const downListener = this.downHandler.bind(this);
    const upListener = this.upHandler.bind(this);
    
    //Error on following two lines:  
    window.addEventListener(type: "keydown", downListener:any):void;
    window.addEventListener(type: "keyup", upListener:any):void;
    

    unsubscribe = () => {
        window.removeEventListener("keydown", this.downListener);
        window.removeEventListener("keyup", this.upListener);
    };
}

Solutions I tried were to modify the tsconfig file's noImplicitAny property to false. As I had coded the function in js, I was trying to convert the file to ts. Here is the js code:

function keyboard(value) {
    let key = {};
    key.value = value;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;
    
    key.downHandler = event => {
        if (event.key === key.value) {
            if (key.isUp && key.press) key.press();
            key.isDown = true;
            key.isUp = false;
            event.preventDefault();
        }
    };

    
    key.upHandler = event => {
        if (event.key === key.value) {
            if (key.isDown && key.release) key.release();
            key.isDown = false;
            key.isUp = true;
            event.preventDefault();
        }
    };

    
    const downListener = key.downHandler.bind(key);
    const upListener = key.upHandler.bind(key);

    window.addEventListener(
        "keydown", downListener, false
    );
    window.addEventListener(
        "keyup", upListener, false
    );

    
    key.unsubscribe = () => {
        window.removeEventListener("keydown", downListener);
        window.removeEventListener("keyup", upListener);
    };

    return key;
}

• javascript
• typescript
• addeventlistener
• typescript-eslint

Share Improve this question Follow edited Jul 30, 2021 at 9:33 distante 7,02566 gold badges6161 silver badges103103 bronze badges asked Jul 30, 2021 at 9:24 Arju AmanArju Aman 41211 gold badge55 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You are mixing function definitions with function calls

this is a (wrong) function definition :

//Error on following two lines:  
    window.addEventListener(type: "keydown", downListener:any):void;
    window.addEventListener(type: "keyup", upListener:any):void;

should be put on the class constructor as function calls

constructor() {
    window.addEventListener("keydown", downListener);
    window.addEventListener("keyup", upListener);
}