Typescript types

[fkranenburg]

Please add typescript typings or convert this to typescript. I wrote a typescript version which is working for me:

import { Component, Prop } from 'vue-property-decorator'
import Vue from 'vue'

@Component({
    name: "KeyPress"
})
export default class KeyPress extends Vue{

    @Prop({default:null})
    keyCode!:number;

    @Prop({default:"keyup"})
    event!:string;

    mounted() {
        window.addEventListener(this.event,this.emitEvent,false);
    }
    destroyed() {
       window.removeEventListener(this.event, this.emitEvent,false);
    }
    emitEvent(event:Event) {
        if(event instanceof KeyboardEvent){
            if (event.keyCode === this.keyCode || !this.keyCode) {
                this.$emit("pressed", event.keyCode);
              }
        }
    }
    render(){
        //nothing
    }
  };

[lupas]

Hi @fkranenburg
Please excuse the late response.

I'm happy to merge your typescript version into the module, could you create a PR for it?
Since I'm not a heavy typescript user (yet) I'm not exactly sure on how to approach building a SFC package with TS..

Thanks :)

[punund]

I vote against making it typescript-only. There are people who are not will never use typescript.

[lupas]

@punund
No worries - Will for sure not make it typescript only. The module will be built into plain javascript before it is published to NPM.

But changing the source code to typescript will make sure the types can be shipped automatically with the module, which will make Typescript user's life easier.

[javatlacati]

If you can't wait or the change from js to ts never happens, you can just add the typings definition.
To do this you should edit the tsconfig.json file, and add the typeRoots property under the compilerOptions property.

{
  "compilerOptions": {
    //...other properties
    "typeRoots": [
      "src/customTypings",
      "node_modules/@types"
    ]
  }
}

and just add an interface and save it as KeyPress.d.ts

export default interface KeyPress {
    keyCode:number;
    keyEvent:string;
    modifiers:string[];
    preventDefault:boolean;
    multipleKeys:string[];
    setupListeners():void;
    addEventListener(expectedEvent:Event):void;
    eventHandler(expectedEvent:Event):void;
}

[lupas]

@javatlacati
Thanks for the snippet!

I quickly published v2.1.1 where the types are included, so all you gotta do now is add it to your types array in the tsconfig.json.

See here

I'll close this since it's not an issue anymore, next time I'll have some time I'll probably rewrite the module in Typescript.

If someone wants to rebuild the module in typescript be my guest and submit a PR :)