diff --git a/changelog_unreleased/typescript/12896.md b/changelog_unreleased/typescript/12896.md
index 263f0e5c642f..d1b07bd0dcc4 100644
--- a/changelog_unreleased/typescript/12896.md
+++ b/changelog_unreleased/typescript/12896.md
@@ -1,4 +1,4 @@
-#### [HIGHLIGHT]Support TypeScript 4.7 (#12896, #12897, #12898, #12900 by @sosukesuzuki)
+#### [HIGHLIGHT]Support TypeScript 4.7 (#12896, #12897, #12898, #12900, #12921, #12924 by @sosukesuzuki)
 
 Support [TypeScript 4.7](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7) new features!
 
diff --git a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
index 484b3ac0d6b3..0bab1a843387 100644
--- a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
@@ -184,339 +184,19 @@ type Foo =
 ================================================================================
 `;
 
-exports[`ts-4.7-infer-extends.ts format 1`] = `
-====================================options=====================================
-parsers: ["babel-ts"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-type X3<T> = T extends [infer U extends number] ? MustBeNumber<U> : never;
-type X4<T> = T extends [infer U extends number, infer U extends number] ? MustBeNumber<U> : never;
-type X5<T> = T extends [infer U extends number, infer U] ? MustBeNumber<U> : never;
-type X6<T> = T extends [infer U, infer U extends number] ? MustBeNumber<U> : never;
-type X7<T> = T extends [infer U extends string, infer U extends number] ? U : never;
-type X8<U, T> = T extends infer U extends number ? U : T;
-type X9<U, T> = T extends (infer U extends number ? U : T) ? U : T;
-
-=====================================output=====================================
-type X3<T> = T extends [infer U extends number] ? MustBeNumber<U> : never;
-type X4<T> = T extends [infer U extends number, infer U extends number]
-  ? MustBeNumber<U>
-  : never;
-type X5<T> = T extends [infer U extends number, infer U]
-  ? MustBeNumber<U>
-  : never;
-type X6<T> = T extends [infer U, infer U extends number]
-  ? MustBeNumber<U>
-  : never;
-type X7<T> = T extends [infer U extends string, infer U extends number]
-  ? U
-  : never;
-type X8<U, T> = T extends infer U extends number ? U : T;
-type X9<U, T> = T extends (infer U extends number ? U : T) ? U : T;
-
-================================================================================
-`;
-
 exports[`ts-4.7-instantiation-expression.ts format 1`] = `
 ====================================options=====================================
 parsers: ["babel-ts"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-// basic
-const foo = bar<T>;
-
 // typeof
 let x: typeof y.z<w>;
 
-// new
-new A<T>;
-
 =====================================output=====================================
-// basic
-const foo = bar<T>;
-
 // typeof
 let x: typeof y.z<w>;
 
-// new
-new A<T>();
-
-================================================================================
-`;
-
-exports[`ts-4.7-optional-variance.ts format 1`] = `
-====================================options=====================================
-parsers: ["babel-ts"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-type Covariant<out T> = {
-    x: T;
-}
-type Contravariant<in T> = {
-    f: (x: T) => void;
-}
-type Invariant<in out T> = {
-    f: (x: T) => T;
-}
-type T10<out T> = T;
-type T11<in T> = keyof T;
-type T12<out T, out K extends keyof T> = T[K];
-type T13<in out T> = T[keyof T];
-
-type Covariant1<in T> = {
-    x: T;
-}
-
-type Contravariant1<out T> = keyof T;
-
-type Contravariant2<out T> = {
-    f: (x: T) => void;
-}
-
-type Invariant1<in T> = {
-    f: (x: T) => T;
-}
-
-type Invariant2<out T> = {
-    f: (x: T) => T;
-}
-type Foo1<in T> = {
-    x: T;
-    f: FooFn1<T>;
-}
-
-type Foo2<out T> = {
-    x: T;
-    f: FooFn2<T>;
-}
-
-type Foo3<in out T> = {
-    x: T;
-    f: FooFn3<T>;
-}
-
-type T21<in out T> = T;
-
-interface Baz<out T> {}
-interface Baz<in T> {}
-
-interface Parent<out A> {
-    child: Child<A> | null;
-    parent: Parent<A> | null;
-}
-
-declare class StateNode<TContext, in out TEvent extends { type: string }> {
-    _storedEvent: TEvent;
-    _action: ActionObject<TEvent>;
-    _state: StateNode<TContext, any>;
-}
-
-=====================================output=====================================
-type Covariant<out T> = {
-  x: T;
-};
-type Contravariant<in T> = {
-  f: (x: T) => void;
-};
-type Invariant<in out T> = {
-  f: (x: T) => T;
-};
-type T10<out T> = T;
-type T11<in T> = keyof T;
-type T12<out T, out K extends keyof T> = T[K];
-type T13<in out T> = T[keyof T];
-
-type Covariant1<in T> = {
-  x: T;
-};
-
-type Contravariant1<out T> = keyof T;
-
-type Contravariant2<out T> = {
-  f: (x: T) => void;
-};
-
-type Invariant1<in T> = {
-  f: (x: T) => T;
-};
-
-type Invariant2<out T> = {
-  f: (x: T) => T;
-};
-type Foo1<in T> = {
-  x: T;
-  f: FooFn1<T>;
-};
-
-type Foo2<out T> = {
-  x: T;
-  f: FooFn2<T>;
-};
-
-type Foo3<in out T> = {
-  x: T;
-  f: FooFn3<T>;
-};
-
-type T21<in out T> = T;
-
-interface Baz<out T> {}
-interface Baz<in T> {}
-
-interface Parent<out A> {
-  child: Child<A> | null;
-  parent: Parent<A> | null;
-}
-
-declare class StateNode<TContext, in out TEvent extends { type: string }> {
-  _storedEvent: TEvent;
-  _action: ActionObject<TEvent>;
-  _state: StateNode<TContext, any>;
-}
-
-================================================================================
-`;
-
-exports[`ts-4.7-optional-variance-with-jsx.tsx format 1`] = `
-====================================options=====================================
-parsers: ["babel-ts"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-// valid JSX
-<in T>() => {}</in>;
-
-type Covariant<out T> = {
-    x: T;
-}
-type Contravariant<in T> = {
-    f: (x: T) => void;
-}
-type Invariant<in out T> = {
-    f: (x: T) => T;
-}
-type T10<out T> = T;
-type T11<in T> = keyof T;
-type T12<out T, out K extends keyof T> = T[K];
-type T13<in out T> = T[keyof T];
-
-type Covariant1<in T> = {
-    x: T;
-}
-
-type Contravariant1<out T> = keyof T;
-
-type Contravariant2<out T> = {
-    f: (x: T) => void;
-}
-
-type Invariant1<in T> = {
-    f: (x: T) => T;
-}
-
-type Invariant2<out T> = {
-    f: (x: T) => T;
-}
-type Foo1<in T> = {
-    x: T;
-    f: FooFn1<T>;
-}
-
-type Foo2<out T> = {
-    x: T;
-    f: FooFn2<T>;
-}
-
-type Foo3<in out T> = {
-    x: T;
-    f: FooFn3<T>;
-}
-
-type T21<in out T> = T;
-
-interface Baz<out T> {}
-interface Baz<in T> {}
-
-interface Parent<out A> {
-    child: Child<A> | null;
-    parent: Parent<A> | null;
-}
-
-declare class StateNode<TContext, in out TEvent extends { type: string }> {
-    _storedEvent: TEvent;
-    _action: ActionObject<TEvent>;
-    _state: StateNode<TContext, any>;
-}
-
-=====================================output=====================================
-// valid JSX
-<in T>() => {}</in>;
-
-type Covariant<out T> = {
-  x: T;
-};
-type Contravariant<in T> = {
-  f: (x: T) => void;
-};
-type Invariant<in out T> = {
-  f: (x: T) => T;
-};
-type T10<out T> = T;
-type T11<in T> = keyof T;
-type T12<out T, out K extends keyof T> = T[K];
-type T13<in out T> = T[keyof T];
-
-type Covariant1<in T> = {
-  x: T;
-};
-
-type Contravariant1<out T> = keyof T;
-
-type Contravariant2<out T> = {
-  f: (x: T) => void;
-};
-
-type Invariant1<in T> = {
-  f: (x: T) => T;
-};
-
-type Invariant2<out T> = {
-  f: (x: T) => T;
-};
-type Foo1<in T> = {
-  x: T;
-  f: FooFn1<T>;
-};
-
-type Foo2<out T> = {
-  x: T;
-  f: FooFn2<T>;
-};
-
-type Foo3<in out T> = {
-  x: T;
-  f: FooFn3<T>;
-};
-
-type T21<in out T> = T;
-
-interface Baz<out T> {}
-interface Baz<in T> {}
-
-interface Parent<out A> {
-  child: Child<A> | null;
-  parent: Parent<A> | null;
-}
-
-declare class StateNode<TContext, in out TEvent extends { type: string }> {
-  _storedEvent: TEvent;
-  _action: ActionObject<TEvent>;
-  _state: StateNode<TContext, any>;
-}
-
 ================================================================================
 `;
 
diff --git a/tests/format/misc/typescript-babel-only/ts-4.7-instantiation-expression.ts b/tests/format/misc/typescript-babel-only/ts-4.7-instantiation-expression.ts
index 7334d2dfbb81..f5e71be1f8ff 100644
--- a/tests/format/misc/typescript-babel-only/ts-4.7-instantiation-expression.ts
+++ b/tests/format/misc/typescript-babel-only/ts-4.7-instantiation-expression.ts
@@ -1,8 +1,2 @@
-// basic
-const foo = bar<T>;
-
 // typeof
 let x: typeof y.z<w>;
-
-// new
-new A<T>;
diff --git a/tests/format/typescript/infer-extends/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/infer-extends/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..53d6048d8481
--- /dev/null
+++ b/tests/format/typescript/infer-extends/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+type X3<T> = T extends [infer U extends number] ? MustBeNumber<U> : never;
+type X4<T> = T extends [infer U extends number, infer U extends number] ? MustBeNumber<U> : never;
+type X5<T> = T extends [infer U extends number, infer U] ? MustBeNumber<U> : never;
+type X6<T> = T extends [infer U, infer U extends number] ? MustBeNumber<U> : never;
+type X7<T> = T extends [infer U extends string, infer U extends number] ? U : never;
+type X8<U, T> = T extends infer U extends number ? U : T;
+type X9<U, T> = T extends (infer U extends number ? U : T) ? U : T;
+
+=====================================output=====================================
+type X3<T> = T extends [infer U extends number] ? MustBeNumber<U> : never;
+type X4<T> = T extends [infer U extends number, infer U extends number]
+  ? MustBeNumber<U>
+  : never;
+type X5<T> = T extends [infer U extends number, infer U]
+  ? MustBeNumber<U>
+  : never;
+type X6<T> = T extends [infer U, infer U extends number]
+  ? MustBeNumber<U>
+  : never;
+type X7<T> = T extends [infer U extends string, infer U extends number]
+  ? U
+  : never;
+type X8<U, T> = T extends infer U extends number ? U : T;
+type X9<U, T> = T extends (infer U extends number ? U : T) ? U : T;
+
+================================================================================
+`;
diff --git a/tests/format/misc/typescript-babel-only/ts-4.7-infer-extends.ts b/tests/format/typescript/infer-extends/basic.ts
similarity index 100%
rename from tests/format/misc/typescript-babel-only/ts-4.7-infer-extends.ts
rename to tests/format/typescript/infer-extends/basic.ts
diff --git a/tests/format/typescript/infer-extends/jsfmt.spec.js b/tests/format/typescript/infer-extends/jsfmt.spec.js
new file mode 100644
index 000000000000..2ea3bb6eb2e4
--- /dev/null
+++ b/tests/format/typescript/infer-extends/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["typescript"]);
diff --git a/tests/format/typescript/instantiation-expression/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/instantiation-expression/__snapshots__/jsfmt.spec.js.snap
index ce37081d8cfe..29fb2537be05 100644
--- a/tests/format/typescript/instantiation-expression/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/typescript/instantiation-expression/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`basic.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// basic
+const foo = bar<T>;
+
+=====================================output=====================================
+// basic
+const foo = bar<T>;
+
+================================================================================
+`;
+
 exports[`binary-expr.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
@@ -36,3 +52,19 @@ interface Example {
 
 ================================================================================
 `;
+
+exports[`new.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// new
+new A<T>;
+
+=====================================output=====================================
+// new
+new A<T>();
+
+================================================================================
+`;
diff --git a/tests/format/typescript/instantiation-expression/basic.ts b/tests/format/typescript/instantiation-expression/basic.ts
new file mode 100644
index 000000000000..6bba4f1adb49
--- /dev/null
+++ b/tests/format/typescript/instantiation-expression/basic.ts
@@ -0,0 +1,2 @@
+// basic
+const foo = bar<T>;
diff --git a/tests/format/typescript/instantiation-expression/new.ts b/tests/format/typescript/instantiation-expression/new.ts
new file mode 100644
index 000000000000..92cb2ff1b585
--- /dev/null
+++ b/tests/format/typescript/instantiation-expression/new.ts
@@ -0,0 +1,2 @@
+// new
+new A<T>;
diff --git a/tests/format/typescript/optional-variance/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/optional-variance/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..ff238fb554f1
--- /dev/null
+++ b/tests/format/typescript/optional-variance/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,285 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+type Covariant<out T> = {
+    x: T;
+}
+type Contravariant<in T> = {
+    f: (x: T) => void;
+}
+type Invariant<in out T> = {
+    f: (x: T) => T;
+}
+type T10<out T> = T;
+type T11<in T> = keyof T;
+type T12<out T, out K extends keyof T> = T[K];
+type T13<in out T> = T[keyof T];
+
+type Covariant1<in T> = {
+    x: T;
+}
+
+type Contravariant1<out T> = keyof T;
+
+type Contravariant2<out T> = {
+    f: (x: T) => void;
+}
+
+type Invariant1<in T> = {
+    f: (x: T) => T;
+}
+
+type Invariant2<out T> = {
+    f: (x: T) => T;
+}
+type Foo1<in T> = {
+    x: T;
+    f: FooFn1<T>;
+}
+
+type Foo2<out T> = {
+    x: T;
+    f: FooFn2<T>;
+}
+
+type Foo3<in out T> = {
+    x: T;
+    f: FooFn3<T>;
+}
+
+type T21<in out T> = T;
+
+interface Baz<out T> {}
+interface Baz<in T> {}
+
+interface Parent<out A> {
+    child: Child<A> | null;
+    parent: Parent<A> | null;
+}
+
+declare class StateNode<TContext, in out TEvent extends { type: string }> {
+    _storedEvent: TEvent;
+    _action: ActionObject<TEvent>;
+    _state: StateNode<TContext, any>;
+}
+
+=====================================output=====================================
+type Covariant<out T> = {
+  x: T;
+};
+type Contravariant<in T> = {
+  f: (x: T) => void;
+};
+type Invariant<in out T> = {
+  f: (x: T) => T;
+};
+type T10<out T> = T;
+type T11<in T> = keyof T;
+type T12<out T, out K extends keyof T> = T[K];
+type T13<in out T> = T[keyof T];
+
+type Covariant1<in T> = {
+  x: T;
+};
+
+type Contravariant1<out T> = keyof T;
+
+type Contravariant2<out T> = {
+  f: (x: T) => void;
+};
+
+type Invariant1<in T> = {
+  f: (x: T) => T;
+};
+
+type Invariant2<out T> = {
+  f: (x: T) => T;
+};
+type Foo1<in T> = {
+  x: T;
+  f: FooFn1<T>;
+};
+
+type Foo2<out T> = {
+  x: T;
+  f: FooFn2<T>;
+};
+
+type Foo3<in out T> = {
+  x: T;
+  f: FooFn3<T>;
+};
+
+type T21<in out T> = T;
+
+interface Baz<out T> {}
+interface Baz<in T> {}
+
+interface Parent<out A> {
+  child: Child<A> | null;
+  parent: Parent<A> | null;
+}
+
+declare class StateNode<TContext, in out TEvent extends { type: string }> {
+  _storedEvent: TEvent;
+  _action: ActionObject<TEvent>;
+  _state: StateNode<TContext, any>;
+}
+
+================================================================================
+`;
+
+exports[`with-jsx.tsx [babel-ts] format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// valid JSX
+<in T>() => {}</in>;
+
+type Covariant<out T> = {
+    x: T;
+}
+type Contravariant<in T> = {
+    f: (x: T) => void;
+}
+type Invariant<in out T> = {
+    f: (x: T) => T;
+}
+type T10<out T> = T;
+type T11<in T> = keyof T;
+type T12<out T, out K extends keyof T> = T[K];
+type T13<in out T> = T[keyof T];
+
+type Covariant1<in T> = {
+    x: T;
+}
+
+type Contravariant1<out T> = keyof T;
+
+type Contravariant2<out T> = {
+    f: (x: T) => void;
+}
+
+type Invariant1<in T> = {
+    f: (x: T) => T;
+}
+
+type Invariant2<out T> = {
+    f: (x: T) => T;
+}
+type Foo1<in T> = {
+    x: T;
+    f: FooFn1<T>;
+}
+
+type Foo2<out T> = {
+    x: T;
+    f: FooFn2<T>;
+}
+
+type Foo3<in out T> = {
+    x: T;
+    f: FooFn3<T>;
+}
+
+type T21<in out T> = T;
+
+interface Baz<out T> {}
+interface Baz<in T> {}
+
+interface Parent<out A> {
+    child: Child<A> | null;
+    parent: Parent<A> | null;
+}
+
+declare class StateNode<TContext, in out TEvent extends { type: string }> {
+    _storedEvent: TEvent;
+    _action: ActionObject<TEvent>;
+    _state: StateNode<TContext, any>;
+}
+
+=====================================output=====================================
+// valid JSX
+<in T>() => {}</in>;
+
+type Covariant<out T> = {
+  x: T;
+};
+type Contravariant<in T> = {
+  f: (x: T) => void;
+};
+type Invariant<in out T> = {
+  f: (x: T) => T;
+};
+type T10<out T> = T;
+type T11<in T> = keyof T;
+type T12<out T, out K extends keyof T> = T[K];
+type T13<in out T> = T[keyof T];
+
+type Covariant1<in T> = {
+  x: T;
+};
+
+type Contravariant1<out T> = keyof T;
+
+type Contravariant2<out T> = {
+  f: (x: T) => void;
+};
+
+type Invariant1<in T> = {
+  f: (x: T) => T;
+};
+
+type Invariant2<out T> = {
+  f: (x: T) => T;
+};
+type Foo1<in T> = {
+  x: T;
+  f: FooFn1<T>;
+};
+
+type Foo2<out T> = {
+  x: T;
+  f: FooFn2<T>;
+};
+
+type Foo3<in out T> = {
+  x: T;
+  f: FooFn3<T>;
+};
+
+type T21<in out T> = T;
+
+interface Baz<out T> {}
+interface Baz<in T> {}
+
+interface Parent<out A> {
+  child: Child<A> | null;
+  parent: Parent<A> | null;
+}
+
+declare class StateNode<TContext, in out TEvent extends { type: string }> {
+  _storedEvent: TEvent;
+  _action: ActionObject<TEvent>;
+  _state: StateNode<TContext, any>;
+}
+
+================================================================================
+`;
+
+exports[`with-jsx.tsx [typescript] format 1`] = `
+"Unexpected token. Did you mean \`{'>'}\` or \`&gt;\`? (2:11)
+  1 | // valid JSX
+> 2 | <in T>() => {}</in>;
+    |           ^
+  3 |
+  4 | type Covariant<out T> = {
+  5 |     x: T;"
+`;
diff --git a/tests/format/misc/typescript-babel-only/ts-4.7-optional-variance.ts b/tests/format/typescript/optional-variance/basic.ts
similarity index 100%
rename from tests/format/misc/typescript-babel-only/ts-4.7-optional-variance.ts
rename to tests/format/typescript/optional-variance/basic.ts
diff --git a/tests/format/typescript/optional-variance/jsfmt.spec.js b/tests/format/typescript/optional-variance/jsfmt.spec.js
new file mode 100644
index 000000000000..a156e3b55d18
--- /dev/null
+++ b/tests/format/typescript/optional-variance/jsfmt.spec.js
@@ -0,0 +1,3 @@
+run_spec(__dirname, ["typescript"], {
+  errors: { typescript: ["with-jsx.tsx"] },
+});
diff --git a/tests/format/misc/typescript-babel-only/ts-4.7-optional-variance-with-jsx.tsx b/tests/format/typescript/optional-variance/with-jsx.tsx
similarity index 100%
rename from tests/format/misc/typescript-babel-only/ts-4.7-optional-variance-with-jsx.tsx
rename to tests/format/typescript/optional-variance/with-jsx.tsx