diff --git a/packages/eslint-plugin/src/rules/key-spacing.ts b/packages/eslint-plugin/src/rules/key-spacing.ts
index d04407081ca..20d7f577ecf 100644
--- a/packages/eslint-plugin/src/rules/key-spacing.ts
+++ b/packages/eslint-plugin/src/rules/key-spacing.ts
@@ -163,9 +163,15 @@ export default util.createRule<Options, MessageIds>({
       mode: 'minimum' | 'strict',
     ): void {
       const { typeAnnotation } = node;
-      const colon = typeAnnotation.loc.start.column;
-      const typeStart = typeAnnotation.typeAnnotation.loc.start.column;
-      const difference = typeStart - colon - 1 - expectedWhitespaceAfterColon;
+      const colonToken = sourceCode.getFirstToken(typeAnnotation)!;
+      const typeStart = sourceCode.getTokenAfter(colonToken, {
+        includeComments: true,
+      })!.loc.start.column;
+      const difference =
+        typeStart -
+        colonToken.loc.start.column -
+        1 -
+        expectedWhitespaceAfterColon;
       if (mode === 'strict' ? difference : difference < 0) {
         context.report({
           node,
@@ -173,14 +179,11 @@ export default util.createRule<Options, MessageIds>({
           fix: fixer => {
             if (difference > 0) {
               return fixer.removeRange([
-                typeAnnotation.typeAnnotation.range[0] - difference,
-                typeAnnotation.typeAnnotation.range[0],
+                colonToken.range[1],
+                colonToken.range[1] + difference,
               ]);
             }
-            return fixer.insertTextBefore(
-              typeAnnotation.typeAnnotation,
-              ' '.repeat(-difference),
-            );
+            return fixer.insertTextAfter(colonToken, ' '.repeat(-difference));
           },
           data: {
             computed: '',
diff --git a/packages/eslint-plugin/tests/rules/key-spacing.test.ts b/packages/eslint-plugin/tests/rules/key-spacing.test.ts
index a0e1c1e9872..e006ef8637f 100644
--- a/packages/eslint-plugin/tests/rules/key-spacing.test.ts
+++ b/packages/eslint-plugin/tests/rules/key-spacing.test.ts
@@ -580,6 +580,46 @@ interface X { a:number; abc:string; };
         },
       ],
     },
+    {
+      code: `
+class Foo {
+  a: (b)
+}
+      `,
+    },
+    {
+      code: `
+interface Foo {
+  a: (b)
+}
+      `,
+    },
+    {
+      code: `
+class Foo {
+  a: /** comment */ b
+}
+      `,
+    },
+    {
+      code: `
+class Foo {
+  a: (     b)
+}
+      `,
+    },
+    {
+      code: `
+class Foo { a: (b) }
+      `,
+    },
+    {
+      code: `
+class Foo {
+  a?: (string | number)
+}
+      `,
+    },
   ],
   invalid: [
     // align: value
@@ -1317,5 +1357,100 @@ class Wacky {
         { messageId: 'missingValue' },
       ],
     },
+    {
+      code: `
+class Foo {
+  a:  (b)
+}
+      `,
+      output: `
+class Foo {
+  a: (b)
+}
+      `,
+      errors: [{ messageId: 'extraValue' }],
+    },
+    {
+      code: `
+interface Foo {
+  a:  (b)
+}
+      `,
+      output: `
+interface Foo {
+  a: (b)
+}
+      `,
+      errors: [{ messageId: 'extraValue' }],
+    },
+    {
+      code: `
+class Foo {
+  a:  /** comment */ b
+}
+      `,
+      output: `
+class Foo {
+  a: /** comment */ b
+}
+      `,
+      errors: [{ messageId: 'extraValue' }],
+    },
+    {
+      code: `
+class Foo {
+  a:    (     b)
+}
+      `,
+      output: `
+class Foo {
+  a: (     b)
+}
+      `,
+      errors: [{ messageId: 'extraValue' }],
+    },
+    {
+      code: `
+interface X { a:(number); };
+      `,
+      output: `
+interface X { a : (number); };
+      `,
+      options: [
+        {
+          singleLine: { beforeColon: true, afterColon: true, mode: 'strict' },
+          multiLine: { beforeColon: true, afterColon: true },
+        },
+      ],
+      errors: [{ messageId: 'missingKey' }, { messageId: 'missingValue' }],
+    },
+    {
+      code: `
+interface X { a:/** comment */ number; };
+      `,
+      output: `
+interface X { a : /** comment */ number; };
+      `,
+      options: [
+        {
+          singleLine: { beforeColon: true, afterColon: true, mode: 'strict' },
+          multiLine: { beforeColon: true, afterColon: true },
+        },
+      ],
+      errors: [{ messageId: 'missingKey' }, { messageId: 'missingValue' }],
+    },
+    {
+      code: `
+class Foo {
+  a:    (string | number)
+}
+      `,
+      output: `
+class Foo {
+  a: (string | number)
+}
+      `,
+      errors: [{ messageId: 'extraValue' }],
+    },
   ],
 });