Show interactive inlay hints in parameter types (#55918)

src/services/inlayHints.ts

@@ -253,14 +253,14 @@ export function provideInlayHints(context: InlayHintsContext): InlayHint[] {
             return;
         }
 
-        const hints = typeToInlayHintParts(declarationType);
-        if (hints) {
-            const hintText = typeof hints === "string" ? hints : hints.map(part => part.text).join("");
+        const hintParts = typeToInlayHintParts(declarationType);
+        if (hintParts) {
+            const hintText = typeof hintParts === "string" ? hintParts : hintParts.map(part => part.text).join("");
             const isVariableNameMatchesType = preferences.includeInlayVariableTypeHintsWhenTypeMatchesName === false && equateStringsCaseInsensitive(decl.name.getText(), hintText);
             if (isVariableNameMatchesType) {
                 return;
             }
-            addTypeHints(hints, decl.name.end);
+            addTypeHints(hintParts, decl.name.end);
         }
     }
 
@@ -385,9 +385,9 @@ export function provideInlayHints(context: InlayHintsContext): InlayHint[] {
             return;
         }
 
-        const hint = typeToInlayHintParts(returnType);
-        if (hint) {
-            addTypeHints(hint, getTypeAnnotationPosition(decl));
+        const hintParts = typeToInlayHintParts(returnType);
+        if (hintParts) {
+            addTypeHints(hintParts, getTypeAnnotationPosition(decl));
         }
     }
 
@@ -416,16 +416,16 @@ export function provideInlayHints(context: InlayHintsContext): InlayHint[] {
                 continue;
             }
 
-            const typeDisplayString = getParameterDeclarationTypeDisplayString(signature.parameters[i]);
-            if (!typeDisplayString) {
+            const typeHints = getParameterDeclarationTypeHints(signature.parameters[i]);
+            if (!typeHints) {
                 continue;
             }
 
-            addTypeHints(typeDisplayString, param.questionToken ? param.questionToken.end : param.name.end);
+            addTypeHints(typeHints, param.questionToken ? param.questionToken.end : param.name.end);
         }
     }
 
-    function getParameterDeclarationTypeDisplayString(symbol: Symbol) {
+    function getParameterDeclarationTypeHints(symbol: Symbol) {
         const valueDeclaration = symbol.valueDeclaration;
         if (!valueDeclaration || !isParameter(valueDeclaration)) {
             return undefined;
@@ -435,8 +435,7 @@ export function provideInlayHints(context: InlayHintsContext): InlayHint[] {
         if (isModuleReferenceType(signatureParamType)) {
             return undefined;
         }
-
-        return printTypeInSingleLine(signatureParamType);
+        return typeToInlayHintParts(signatureParamType);
     }
 
     function printTypeInSingleLine(type: Type) {

tests/baselines/reference/inlayHintsInteractiveFunctionParameterTypes1.baseline

@@ -1,80 +1,258 @@
-const f1: F1 = (a, b) => { }
-                 ^
+ const f1: F1 = (a, b) => { }
+                  ^
 {
-  "text": ": string",
-  "position": 58,
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "string"
+    }
+  ],
+  "position": 60,
   "kind": "Type",
   "whitespaceBefore": true
 }
 
-const f1: F1 = (a, b) => { }
+ const f1: F1 = (a, b) => { }
+                     ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "number"
+    }
+  ],
+  "position": 63,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ const f2: F1 = (a, b: number) => { }
+                  ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "string"
+    }
+  ],
+  "position": 90,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ foo1((a) => { })
+        ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "string"
+    }
+  ],
+  "position": 162,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ foo2((a) => { })
+        ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "2"
+    },
+    {
+      "text": " | "
+    },
+    {
+      "text": "3"
+    }
+  ],
+  "position": 239,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ foo3(a => {
+       ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "("
+    },
+    {
+      "text": "c"
+    },
+    {
+      "text": ": "
+    },
+    {
+      "text": "("
+    },
+    {
+      "text": "d"
+    },
+    {
+      "text": ": "
+    },
+    {
+      "text": "2"
+    },
+    {
+      "text": " | "
+    },
+    {
+      "text": "3"
+    },
+    {
+      "text": ")"
+    },
+    {
+      "text": " => "
+    },
+    {
+      "text": "void"
+    },
+    {
+      "text": ")"
+    },
+    {
+      "text": " => "
+    },
+    {
+      "text": "void"
+    }
+  ],
+  "position": 340,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+     a(d => {})
+        ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "2"
+    },
+    {
+      "text": " | "
+    },
+    {
+      "text": "3"
+    }
+  ],
+  "position": 354,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ foo4(1, a => { })
+          ^
+{
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "number"
+    }
+  ],
+  "position": 422,
+  "kind": "Type",
+  "whitespaceBefore": true
+}
+
+ const foo5: F2 = (a) => { }
                     ^
 {
-  "text": ": number",
-  "position": 61,
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "{"
+    },
+    {
+      "text": " "
+    },
+    {
+      "text": "a"
+    },
+    {
+      "text": ": "
+    },
+    {
+      "text": "number"
+    },
+    {
+      "text": "; "
+    },
+    {
+      "text": "b"
+    },
+    {
+      "text": ": "
+    },
+    {
+      "text": "string"
+    },
+    {
+      "text": " "
+    },
+    {
+      "text": "}"
+    }
+  ],
+  "position": 510,
   "kind": "Type",
   "whitespaceBefore": true
 }
 
-const f2: F1 = (a, b: number) => { }
-                 ^
-{
-  "text": ": string",
-  "position": 87,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-foo1((a) => { })
-       ^
-{
-  "text": ": string",
-  "position": 157,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-foo2((a) => { })
-       ^
-{
-  "text": ": 2 | 3",
-  "position": 232,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-foo3(a => {
+foo4(p => {})
       ^
 {
-  "text": ": (c: (d: 2 | 3) => void) => void",
-  "position": 331,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-    a(d => {})
-       ^
-{
-  "text": ": 2 | 3",
-  "position": 344,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-foo4(1, a => { })
-         ^
-{
-  "text": ": number",
-  "position": 409,
-  "kind": "Type",
-  "whitespaceBefore": true
-}
-
-const foo5: F2 = (a) => { }
-                   ^
-{
-  "text": ": { a: number; b: string; }",
-  "position": 492,
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "Thing",
+      "span": {
+        "start": 529,
+        "length": 5
+      },
+      "file": "/tests/cases/fourslash/inlayHintsInteractiveFunctionParameterTypes1.ts"
+    }
+  ],
+  "position": 595,
   "kind": "Type",
   "whitespaceBefore": true
 }

tests/baselines/reference/inlayHintsInteractiveFunctionParameterTypes3.baseline

@@ -1,7 +1,15 @@
     bar: function (x?): void {
                      ^
 {
-  "text": ": boolean",
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "boolean"
+    }
+  ],
   "position": 87,
   "kind": "Type",
   "whitespaceBefore": true
@@ -10,7 +18,15 @@
     set foo(value) { this.#value = value; }
                  ^
 {
-  "text": ": number",
+  "text": "",
+  "displayParts": [
+    {
+      "text": ": "
+    },
+    {
+      "text": "number"
+    }
+  ],
   "position": 250,
   "kind": "Type",
   "whitespaceBefore": true

tests/cases/fourslash/inlayHintsInteractiveFunctionParameterTypes1.ts

@@ -24,6 +24,10 @@
 //// }) => void
 //// const foo5: F2 = (a) => { }
 
+////interface Thing {}
+////function foo4(callback: (thing: Thing) => void) {}
+////foo4(p => {})
+
 verify.baselineInlayHints(undefined, {
     includeInlayFunctionParameterTypeHints: true,
     interactiveInlayHints: true,