Allow type-only imports in computed property names

Author: andrewbranch

src/compiler/checker.ts

@@ -1865,7 +1865,12 @@ namespace ts {
         }
 
         function checkSymbolUsageInExpressionContext(symbol: Symbol, name: __String, useSite: Node) {
-            if (!(useSite.flags & NodeFlags.Ambient) && !isPartOfTypeQuery(useSite) && isExpressionNode(useSite)) {
+            if (
+                !(useSite.flags & NodeFlags.Ambient) &&
+                !isPartOfTypeQuery(useSite) &&
+                !isPartOfPossiblyValidComputedPropertyNameExpression(useSite) &&
+                isExpressionNode(useSite)
+            ) {
                 const typeOnlyDeclaration = getTypeOnlyAliasDeclaration(symbol);
                 if (typeOnlyDeclaration) {
                     const message = typeOnlyDeclaration.kind === SyntaxKind.ExportSpecifier

src/compiler/utilities.ts

@@ -1778,6 +1778,13 @@ namespace ts {
         return node.kind === SyntaxKind.TypeQuery;
     }
 
+    export function isPartOfPossiblyValidComputedPropertyNameExpression(node: Node) {
+        while (node.kind === SyntaxKind.Identifier || node.kind === SyntaxKind.PropertyAccessExpression) {
+            node = node.parent;
+        }
+        return node.kind === SyntaxKind.ComputedPropertyName;
+    }
+
     export function isExternalModuleImportEqualsDeclaration(node: Node): node is ImportEqualsDeclaration & { moduleReference: ExternalModuleReference } {
         return node.kind === SyntaxKind.ImportEqualsDeclaration && (<ImportEqualsDeclaration>node).moduleReference.kind === SyntaxKind.ExternalModuleReference;
     }

tests/baselines/reference/computedPropertyName.js

@@ -0,0 +1,16 @@
+//// [tests/cases/conformance/externalModules/typeOnly/computedPropertyName.ts] ////
+
+//// [framework-hooks.ts]
+export const onInit = Symbol("onInit");
+
+//// [component.ts]
+import type { onInit } from "./framework-hooks";
+
+interface Component {
+  [onInit]?(): void;
+}
+
+
+//// [framework-hooks.js]
+export const onInit = Symbol("onInit");
+//// [component.js]

tests/baselines/reference/computedPropertyName.symbols

@@ -0,0 +1,17 @@
+=== tests/cases/conformance/externalModules/typeOnly/framework-hooks.ts ===
+export const onInit = Symbol("onInit");
+>onInit : Symbol(onInit, Decl(framework-hooks.ts, 0, 12))
+>Symbol : Symbol(Symbol, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.symbol.d.ts, --, --), Decl(lib.es2015.symbol.wellknown.d.ts, --, --), Decl(lib.es2019.symbol.d.ts, --, --))
+
+=== tests/cases/conformance/externalModules/typeOnly/component.ts ===
+import type { onInit } from "./framework-hooks";
+>onInit : Symbol(onInit, Decl(component.ts, 0, 13))
+
+interface Component {
+>Component : Symbol(Component, Decl(component.ts, 0, 48))
+
+  [onInit]?(): void;
+>[onInit] : Symbol(Component[onInit], Decl(component.ts, 2, 21))
+>onInit : Symbol(onInit, Decl(component.ts, 0, 13))
+}
+

tests/baselines/reference/computedPropertyName.types

@@ -0,0 +1,17 @@
+=== tests/cases/conformance/externalModules/typeOnly/framework-hooks.ts ===
+export const onInit = Symbol("onInit");
+>onInit : unique symbol
+>Symbol("onInit") : unique symbol
+>Symbol : SymbolConstructor
+>"onInit" : "onInit"
+
+=== tests/cases/conformance/externalModules/typeOnly/component.ts ===
+import type { onInit } from "./framework-hooks";
+>onInit : any
+
+interface Component {
+  [onInit]?(): void;
+>[onInit] : () => void
+>onInit : unique symbol
+}
+

tests/cases/conformance/externalModules/typeOnly/computedPropertyName.ts

@@ -0,0 +1,11 @@
+// @target: esnext
+
+// @Filename: framework-hooks.ts
+export const onInit = Symbol("onInit");
+
+// @Filename: component.ts
+import type { onInit } from "./framework-hooks";
+
+interface Component {
+  [onInit]?(): void;
+}