Works with vue 2.7.4

Author: vidal7

.gitignore

@@ -0,0 +1,2 @@
+
+node_modules/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+}

package-lock.json

@@ -0,0 +1,14 @@
+{
+  "name": "vue-2-7-issue-typed-emit",
+  "version": "1.0.0",
+  "scripts": {
+    "compile": "tsc --project ./tsconfig.json --noEmit"
+  },
+  "author": "Vincent Dallaire <vincent.dallaire@dti.ulaval.ca>",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.3.5",
+    "vue": "^2.7.4",
+    "vue-class-component": "^7.2.6"
+  }
+}

package.json

@@ -0,0 +1,33 @@
+import Component from 'vue-class-component';
+import VueWithTypedEvents from './VueWithTypedEvents';
+
+export interface ComponentWithTypedEventsEvents {
+    'event-with-string-payload': string;
+    'event-with-number-payload': number;
+    'event-without-payload': undefined;
+}
+
+@Component
+export default class ComponentWithTypedEvents extends VueWithTypedEvents<ComponentWithTypedEventsEvents> {
+    emitEventWithStringPayload(): void {
+        this.$emit('event-with-string-payload', '1');
+        // this.$emit('event-with-string-payload', 1); // Don't compile. Payload is a number and must be a string.
+        // this.$emit('event-with-string-payload'); // Don't compile. Payload is undefined and must be defined with a string.
+    }
+
+    emitEventWithNumberPayload(): void {
+        // this.$emit('event-with-number-payload', '1'); // Don't compile. Payload is a string and must be a number.
+        this.$emit('event-with-number-payload', 1);
+        // this.$emit('event-with-number-payload'); // Don't compile. Payload is undefined and must be defined with a number.
+    }
+
+    emitEventWithoutPayload(): void {
+        // this.$emit('event-without-payload', '1'); // Don't compile. Payload must be undefined.
+        // this.$emit('event-without-payload', 1); // Don't compile. Payload must be undefined.
+        this.$emit('event-without-payload');
+    }
+
+    emitEventThatDoesNotExist(): void {
+        // this.$emit('event-that-does-not-exist'); // Don't compile. Event does not exist on the ComponentWithTypedEventsEvents interface.
+    }
+}

src/ComponentWithTypedEvents.ts

@@ -0,0 +1,15 @@
+
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N;
+
+export default interface VueWithTypedEvents<Events extends Record<string, any> = any> {
+    $emit<Event extends keyof Events>(
+        event: Event,
+        ...args: IfAny<Events, any[], Events[Event] extends undefined ? [] : [Events[Event]]>
+    ): this;
+}
+
+@Component
+export default class VueWithTypedEvents<Events extends Record<string, any> = any> extends Vue {}

src/VueWithTypedEvents.ts

@@ -0,0 +1,31 @@
+{
+    "include": [
+        "src/*.ts",
+    ],
+    "compilerOptions": {
+        "baseUrl": ".",
+        "lib": [
+            "es5",
+            "es6",
+            "dom",
+            "scripthost"
+        ],
+        "target": "es5",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "noEmitOnError": true,
+        "strict": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noUncheckedIndexedAccess": false,
+        "sourceMap": true,
+        "forceConsistentCasingInFileNames": true,
+        "importsNotUsedAsValues": "remove",
+        "skipLibCheck": true
+    }
+}