Merge pull request #17250 from Microsoft/quickfix-jsdoc-in-ts

Quickfix jsdoc in Typescript files

Author: sandersn

src/compiler/checker.ts

@@ -117,6 +117,7 @@ namespace ts {
             },
             getParameterType: getTypeAtPosition,
             getReturnTypeOfSignature,
+            getNullableType,
             getNonNullableType,
             typeToTypeNode: nodeBuilder.typeToTypeNode,
             indexInfoToIndexSignatureDeclaration: nodeBuilder.indexInfoToIndexSignatureDeclaration,
@@ -9963,6 +9964,11 @@ namespace ts {
                 neverType;
         }
 
+        /**
+         * Add undefined or null or both to a type if they are missing.
+         * @param type - type to add undefined and/or null to if not present
+         * @param flags - Either TypeFlags.Undefined or TypeFlags.Null, or both
+         */
         function getNullableType(type: Type, flags: TypeFlags): Type {
             const missing = (flags & ~type.flags) & (TypeFlags.Undefined | TypeFlags.Null);
             return missing === 0 ? type :

src/compiler/types.ts

@@ -2520,6 +2520,7 @@ namespace ts {
          * Returns `any` if the index is not valid.
          */
         /* @internal */ getParameterType(signature: Signature, parameterIndex: number): Type;
+        getNullableType(type: Type, flags: TypeFlags): Type;
         getNonNullableType(type: Type): Type;
 
         /** Note that the resulting nodes cannot be checked. */

src/services/codefixes/disableJsDiagnostics.ts

@@ -32,7 +32,7 @@ namespace ts.codefix {
             }
         }
 
-        // If all fails, add an extra new line immediatlly before the error span.
+        // If all fails, add an extra new line immediately before the error span.
         return {
             span: { start: position, length: 0 },
             newText: `${position === startPosition ? "" : newLineCharacter}// @ts-ignore${newLineCharacter}`
@@ -67,4 +67,4 @@ namespace ts.codefix {
             }]
         }];
     }
-}
+}

src/services/codefixes/fixJSDocTypes.ts

@@ -0,0 +1,40 @@
+/* @internal */
+namespace ts.codefix {
+    registerCodeFix({
+        errorCodes: [Diagnostics.JSDoc_types_can_only_be_used_inside_documentation_comments.code],
+        getCodeActions: getActionsForJSDocTypes
+    });
+
+    function getActionsForJSDocTypes(context: CodeFixContext): CodeAction[] | undefined {
+        const sourceFile = context.sourceFile;
+        const node = getTokenAtPosition(sourceFile, context.span.start, /*includeJsDocComment*/ false);
+        const decl = ts.findAncestor(node, n => n.kind === SyntaxKind.VariableDeclaration);
+        if (!decl) return;
+        const checker = context.program.getTypeChecker();
+
+        const jsdocType = (decl as VariableDeclaration).type;
+        const original = getTextOfNode(jsdocType);
+        const type = checker.getTypeFromTypeNode(jsdocType);
+        const actions = [createAction(jsdocType, sourceFile.fileName, original, checker.typeToString(type, /*enclosingDeclaration*/ undefined, TypeFormatFlags.NoTruncation))];
+        if (jsdocType.kind === SyntaxKind.JSDocNullableType) {
+            // for nullable types, suggest the flow-compatible `T | null | undefined`
+            // in addition to the jsdoc/closure-compatible `T | null`
+            const replacementWithUndefined = checker.typeToString(checker.getNullableType(type, TypeFlags.Undefined), /*enclosingDeclaration*/ undefined, TypeFormatFlags.NoTruncation);
+            actions.push(createAction(jsdocType, sourceFile.fileName, original, replacementWithUndefined));
+        }
+        return actions;
+    }
+
+    function createAction(declaration: TypeNode, fileName: string, original: string, replacement: string): CodeAction {
+        return {
+            description: formatStringFromArgs(getLocaleSpecificMessage(Diagnostics.Change_0_to_1), [original, replacement]),
+            changes: [{
+                fileName,
+                textChanges: [{
+                    span: { start: declaration.getStart(), length: declaration.getWidth() },
+                    newText: replacement
+                }]
+            }],
+        };
+    }
+}

src/services/codefixes/fixes.ts

@@ -7,6 +7,7 @@
 /// <reference path="fixExtendsInterfaceBecomesImplements.ts" />
 /// <reference path="fixForgottenThisPropertyAccess.ts" />
 /// <reference path='fixUnusedIdentifier.ts' />
+/// <reference path='fixJSDocTypes.ts' />
 /// <reference path='importFixes.ts' />
 /// <reference path='disableJsDiagnostics.ts' />
 /// <reference path='helpers.ts' />

tests/cases/fourslash/codeFixChangeJSDocSyntax1.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|?|] = 12;
+
+verify.rangeAfterCodeFix("any");

tests/cases/fourslash/codeFixChangeJSDocSyntax2.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|*|] = 12;
+
+verify.rangeAfterCodeFix("any");

tests/cases/fourslash/codeFixChangeJSDocSyntax3.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|......number[][]|] = 12;
+
+verify.rangeAfterCodeFix("number[][][][]");

tests/cases/fourslash/codeFixChangeJSDocSyntax4.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|Array.<number>|] = 12;
+
+verify.rangeAfterCodeFix("number[]");

tests/cases/fourslash/codeFixChangeJSDocSyntax5.ts

@@ -0,0 +1,5 @@
+// @strict: true
+/// <reference path='fourslash.ts' />
+//// var x: [|?number|] = 12;
+
+verify.rangeAfterCodeFix("number | null", /*includeWhiteSpace*/ false, /*errorCode*/ 8020, 0);

tests/cases/fourslash/codeFixChangeJSDocSyntax6.ts

@@ -0,0 +1,5 @@
+// @strict: true
+/// <reference path='fourslash.ts' />
+//// var x: [|number?|] = 12;
+
+verify.rangeAfterCodeFix("number | null | undefined", /*includeWhiteSpace*/ undefined, /*errorCode*/ undefined, 1);

tests/cases/fourslash/codeFixChangeJSDocSyntax7.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|!number|] = 12;
+
+verify.rangeAfterCodeFix("number");

tests/cases/fourslash/codeFixChangeJSDocSyntax8.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|function(this: number, number): string|] = 12;
+
+verify.rangeAfterCodeFix("(this: number, arg1: number) => string");

tests/cases/fourslash/codeFixChangeJSDocSyntax9.ts

@@ -0,0 +1,4 @@
+/// <reference path='fourslash.ts' />
+//// var x: [|function(new: number)|] = 12;
+
+verify.rangeAfterCodeFix("new () => number");