Fix missing whitespace when rendering types

Resolves #2882

Author: Gerrit0

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

@@ -220,8 +220,7 @@ function renderChild(
                 <h5 id={anchorTargetIfPresent(context, child)}>
                     {!!child.flags.isRest && <span class="tsd-signature-symbol">...</span>}
                     <span class={getKindClass(child)}>{child.name}</span>
-                    <span class="tsd-signature-symbol">{!!child.flags.isOptional && "?"}:</span>
-                    function
+                    <span class="tsd-signature-symbol">{!!child.flags.isOptional && "?"}:</span> function
                 </h5>
 
                 {context.memberSignatures(child)}
@@ -272,10 +271,9 @@ function renderChild(
                 <li class="tsd-parameter">
                     <h5 id={anchorTargetIfPresent(context, child)}>
                         {context.reflectionFlags(child.getSignature)}
-                        <span class="tsd-signature-keyword">get</span>
+                        <span class="tsd-signature-keyword">get</span>{" "}
                         <span class={getKindClass(child)}>{child.name}</span>
-                        <span class="tsd-signature-symbol">():</span>
-                        {context.type(child.getSignature.type)}
+                        <span class="tsd-signature-symbol">():</span> {context.type(child.getSignature.type)}
                     </h5>
 
                     {highlightOrComment(child.getSignature)}
@@ -285,18 +283,16 @@ function renderChild(
                 <li class="tsd-parameter">
                     <h5 id={!child.getSignature ? anchorTargetIfPresent(context, child) : undefined}>
                         {context.reflectionFlags(child.setSignature)}
-                        <span class="tsd-signature-keyword">set</span>
+                        <span class="tsd-signature-keyword">set</span>{" "}
                         <span class={getKindClass(child)}>{child.name}</span>
                         <span class="tsd-signature-symbol">(</span>
                         {child.setSignature.parameters?.map((item) => (
                             <>
                                 {item.name}
-                                <span class="tsd-signature-symbol">:</span>
-                                {context.type(item.type)}
+                                <span class="tsd-signature-symbol">:</span> {context.type(item.type)}
                             </>
                         ))}
-                        <span class="tsd-signature-symbol">):</span>
-                        {context.type(child.setSignature.type)}
+                        <span class="tsd-signature-symbol">):</span> {context.type(child.setSignature.type)}
                     </h5>
 
                     {highlightOrComment(child.setSignature)}
@@ -310,7 +306,12 @@ function renderIndexSignature(context: DefaultThemeRenderContext, index: Signatu
     return (
         <li class="tsd-parameter-index-signature">
             <h5>
-                {index.flags.isReadonly && <span class="tsd-signature-keyword">readonly</span>}
+                {index.flags.isReadonly && (
+                    <>
+                        <span class="tsd-signature-keyword">readonly</span>
+                        {" "}
+                    </>
+                )}
                 <span class="tsd-signature-symbol">[</span>
                 {index.parameters!.map((item) => (
                     <>

src/lib/output/themes/default/templates/reflection.tsx

@@ -81,7 +81,12 @@ function renderIndexSignature(context: DefaultThemeRenderContext, index: Signatu
     return (
         <li class={classNames({ "tsd-index-signature": true }, context.getReflectionClasses(index))}>
             <div class="tsd-signature">
-                {index.flags.isReadonly && <span class="tsd-signature-keyword">readonly</span>}
+                {index.flags.isReadonly && (
+                    <>
+                        <span class="tsd-signature-keyword">readonly</span>
+                        {" "}
+                    </>
+                )}
                 <span class="tsd-signature-symbol">[</span>
                 {index.parameters!.map((item) => (
                     <>

src/lib/output/themes/lib.tsx

@@ -109,8 +109,12 @@ export function renderTypeParametersSignature(
                 <span class="tsd-signature-symbol">{"<"}</span>
                 {join(<span class="tsd-signature-symbol">{", "}</span>, typeParameters, (item) => (
                     <>
-                        {item.flags.isConst && <span class="tsd-signature-keyword">const</span>}
-                        {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                        {(item.flags.isConst || item.varianceModifier) && (
+                            <span class="tsd-signature-keyword">
+                                {item.flags.isConst && "const "}
+                                {item.varianceModifier && `${item.varianceModifier} `}
+                            </span>
+                        )}
                         <a class="tsd-signature-type tsd-kind-type-parameter" href={context.urlTo(item)}>
                             {item.name}
                         </a>
@@ -126,13 +130,17 @@ export function renderTypeParametersSignature(
             <span class="tsd-signature-symbol">{"<"}</span>
             {join(<span class="tsd-signature-symbol">{", "}</span>, typeParameters, (item) => (
                 <>
-                    {item.flags.isConst && "const "}
-                    {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                    {(item.flags.isConst || item.varianceModifier) && (
+                        <span class="tsd-signature-keyword">
+                            {item.flags.isConst && "const "}
+                            {item.varianceModifier && `${item.varianceModifier} `}
+                        </span>
+                    )}
                     <span class="tsd-signature-type tsd-kind-type-parameter">{item.name}</span>
                     {!!item.type && (
                         <>
-                            <span class="tsd-signature-keyword">extends</span>
-                            {context.type(item.type)}
+                            {" "}
+                            <span class="tsd-signature-keyword">extends</span> {context.type(item.type)}
                         </>
                     )}
                 </>