Link to type parameters on functions/classes

Resolves #2322

Author: Gerrit0

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Features
 
+-   Type parameters on functions/classes can will now link to the "Type Parameters" section, #2322.
+    Type parameters have also been changed to have a distinct color from type aliases when rendering, which can be changed with custom CSS.
 -   TypeDoc now provides warnings if a signature comment is directly specified on a signature and contains `@param` tags which do not apply, #2368.
 -   Extended reflection preview view for interfaces to include type parameters, #2455.
 -   Added special cases for converting methods which are documented as returning `this` or accepting `this` as a parameter, #2458.

src/lib/converter/context.ts

@@ -308,9 +308,6 @@ export class Context {
         );
     }
 
-    /**
-     * @param callback  The callback function that should be executed with the changed context.
-     */
     public withScope(scope: Reflection): Context {
         const context = new Context(
             this.converter,

src/lib/converter/converter.ts

@@ -254,7 +254,6 @@ export class Converter extends ChildableComponent<
      * Convert the given TypeScript type into its TypeDoc type reflection.
      *
      * @param context  The context object describing the current state the converter is in.
-     * @param referenceTarget The target to be used to attempt to resolve reference types
      * @returns The TypeDoc type reflection representing the given node and type.
      * @internal
      */

src/lib/models/comments/comment.ts

@@ -387,7 +387,6 @@ export class Comment {
      * Return the first tag with the given name.
      *
      * @param tagName  The name of the tag to look for.
-     * @param paramName  An optional parameter name to look for.
      * @returns The found tag or undefined.
      */
     getTag(tagName: `@${string}`): CommentTag | undefined {

src/lib/models/reflections/abstract.ts

@@ -440,7 +440,7 @@ export abstract class Reflection {
     /**
      * Return a child by its name.
      *
-     * @param names The name hierarchy of the child to look for.
+     * @param arg The name hierarchy of the child to look for.
      * @returns The found child or undefined.
      */
     getChildByName(arg: string | string[]): Reflection | undefined {

src/lib/models/types.ts

@@ -912,23 +912,15 @@ export class ReferenceType extends Type {
         context: Context,
         name?: string,
     ) {
-        // Type parameters should never have resolved references because they
-        // cannot be linked to, and might be declared within the type with conditional types.
-        if (symbol.flags & ts.SymbolFlags.TypeParameter) {
-            const ref = ReferenceType.createBrokenReference(
-                name ?? symbol.name,
-                context.project,
-            );
-            ref.refersToTypeParameter = true;
-            return ref;
-        }
-
         const ref = new ReferenceType(
             name ?? symbol.name,
             new ReflectionSymbolId(symbol),
             context.project,
             getQualifiedName(symbol, name ?? symbol.name),
         );
+        ref.refersToTypeParameter = !!(
+            symbol.flags & ts.SymbolFlags.TypeParameter
+        );
 
         const symbolPath = symbol?.declarations?.[0]
             ?.getSourceFile()

src/lib/output/themes/default/DefaultTheme.tsx

@@ -9,6 +9,7 @@ import {
     SignatureReflection,
     ReflectionCategory,
     ReflectionGroup,
+    TypeParameterReflection,
 } from "../../../models";
 import { RenderTemplate, UrlMapping } from "../../models/UrlMapping";
 import type { PageEvent } from "../../events";
@@ -121,7 +122,6 @@ export class DefaultTheme extends Theme {
      * Create a new DefaultTheme instance.
      *
      * @param renderer  The renderer this theme is attached to.
-     * @param basePath  The base path of this theme.
      */
     constructor(renderer: Renderer) {
         super(renderer);
@@ -336,7 +336,11 @@ export class DefaultTheme extends Theme {
      * @param container   The nearest reflection having an own document.
      */
     static applyAnchorUrl(reflection: Reflection, container: Reflection) {
-        if (!(reflection instanceof DeclarationReflection) && !(reflection instanceof SignatureReflection)) {
+        if (
+            !(reflection instanceof DeclarationReflection) &&
+            !(reflection instanceof SignatureReflection) &&
+            !(reflection instanceof TypeParameterReflection)
+        ) {
             return;
         }
 

src/lib/output/themes/default/partials/type.tsx

@@ -276,8 +276,11 @@ const typeRenderers: {
 
         if (reflection) {
             if (reflection.kindOf(ReflectionKind.TypeParameter)) {
-                // Don't generate a link as it will always point to this page.
-                name = <span class="tsd-signature-type tsd-kind-type-parameter">{reflection.name}</span>;
+                name = (
+                    <a class="tsd-signature-type tsd-kind-type-parameter" href={context.urlTo(reflection)}>
+                        {reflection.name}
+                    </a>
+                );
             } else {
                 name = renderUniquePath(context, reflection);
             }
@@ -290,7 +293,7 @@ const typeRenderers: {
         } else if (type.refersToTypeParameter) {
             name = <span class="tsd-signature-type tsd-kind-type-parameter">{type.name}</span>;
         } else {
-            name = <span class="tsd-signature-type ">{type.name}</span>;
+            name = <span class="tsd-signature-type">{type.name}</span>;
         }
 
         if (type.typeArguments?.length) {

src/lib/output/themes/default/partials/typeParameters.tsx

@@ -11,8 +11,11 @@ export function typeParameters(context: DefaultThemeRenderContext, typeParameter
                     {typeParameters?.map((item) => (
                         <li>
                             <h4>
-                                {item.flags.isConst && "const "}
-                                {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                                <a id={item.anchor} class="tsd-anchor"></a>
+                                {item.flags.isConst && <span class="tsd-signature-keyword">const </span>}
+                                {item.varianceModifier && (
+                                    <span class="tsd-signature-keyword">{item.varianceModifier} </span>
+                                )}
                                 <span class="tsd-kind-type-parameter">{item.name}</span>
                                 {!!item.type && (
                                     <>

src/lib/output/themes/lib.tsx

@@ -108,7 +108,9 @@ export function renderTypeParametersSignature(
                     <>
                         {item.flags.isConst && <span class="tsd-signature-keyword">const </span>}
                         {item.varianceModifier ? `${item.varianceModifier} ` : ""}
-                        <span class="tsd-signature-type tsd-kind-type-parameter">{item.name}</span>
+                        <a class="tsd-signature-type tsd-kind-type-parameter" href={context.urlTo(item)}>
+                            {item.name}
+                        </a>
                     </>
                 ))}
                 <span class="tsd-signature-symbol">{">"}</span>