From 0a9f32cede1736b7e3004d37f1532235e77b7ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E7=92=90?= <wenlu.wang@chaitin.com>
Date: Tue, 20 Feb 2018 21:33:01 +0800
Subject: [PATCH] replace element access if suggession is not a valid
 identifier

---
 src/services/codefixes/fixSpelling.ts        | 15 ++++++++++-----
 tests/cases/fourslash/codeFixSpelling_all.ts | 12 +++++++++++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index 729f14e9ef9..202e00b77e9 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -8,18 +8,18 @@ namespace ts.codefix {
     registerCodeFix({
         errorCodes,
         getCodeActions(context) {
-            const { sourceFile } = context;
+            const { sourceFile, host } = context;
             const info = getInfo(sourceFile, context.span.start, context.program.getTypeChecker());
             if (!info) return undefined;
             const { node, suggestion } = info;
-            const changes = textChanges.ChangeTracker.with(context, t => doChange(t, sourceFile, node, suggestion));
+            const changes = textChanges.ChangeTracker.with(context, t => doChange(t, sourceFile, node, suggestion, host.getCompilationSettings().target));
             const description = formatStringFromArgs(getLocaleSpecificMessage(Diagnostics.Change_spelling_to_0), [suggestion]);
             return [{ description, changes, fixId }];
         },
         fixIds: [fixId],
         getAllCodeActions: context => codeFixAll(context, errorCodes, (changes, diag) => {
             const info = getInfo(diag.file!, diag.start!, context.program.getTypeChecker());
-            if (info) doChange(changes, context.sourceFile, info.node, info.suggestion);
+            if (info) doChange(changes, context.sourceFile, info.node, info.suggestion, context.host.getCompilationSettings().target);
         }),
     });
 
@@ -45,8 +45,13 @@ namespace ts.codefix {
         return suggestion === undefined ? undefined : { node, suggestion };
     }
 
-    function doChange(changes: textChanges.ChangeTracker, sourceFile: SourceFile, node: Node, suggestion: string) {
-        changes.replaceNode(sourceFile, node, createIdentifier(suggestion));
+    function doChange(changes: textChanges.ChangeTracker, sourceFile: SourceFile, node: Node, suggestion: string, target: ScriptTarget) {
+        if (!isIdentifierText(suggestion, target) && isPropertyAccessExpression(node.parent)) {
+            changes.replaceNode(sourceFile, node.parent, createElementAccess(node.parent.expression, createLiteral(suggestion)));
+        }
+        else {
+            changes.replaceNode(sourceFile, node, createIdentifier(suggestion));
+        }
     }
 
     function convertSemanticMeaningToSymbolFlags(meaning: SemanticMeaning): SymbolFlags {
diff --git a/tests/cases/fourslash/codeFixSpelling_all.ts b/tests/cases/fourslash/codeFixSpelling_all.ts
index 08b73b9ca1b..35f836c1cd7 100644
--- a/tests/cases/fourslash/codeFixSpelling_all.ts
+++ b/tests/cases/fourslash/codeFixSpelling_all.ts
@@ -4,6 +4,11 @@
 ////    s.toStrang();
 ////    s.toStrong();
 ////}
+////
+////type A = { "foo-bar": number; "barbaz": string; };
+////var a: A;
+////a.foobar;
+////a.barbz
 
 verify.codeFixAll({
     fixId: "fixSpelling",
@@ -11,5 +16,10 @@ verify.codeFixAll({
 `function f(s: string) {
     s.toString();
     s.toString();
-}`,
+}
+
+type A = { "foo-bar": number; "barbaz": string; };
+var a: A;
+a["foo-bar"];
+a.barbaz`,
 });