build(docs-infra): render optional decorator options with a ? (#39167)

Decorator API pages list all their available options in an overview
table and also in a detailed view. Now the rendered syntax of each
option will show a `?` after the name if the option is not required.
This is inline with how class and interface members are rendered.

PR Close #39167

aio/tools/transforms/templates/api/decorator.template.html

@@ -12,12 +12,16 @@
   {% for option in doc.members %}
   <a id="{$ option.anchor $}"></a>
   <table class="is-full-width option-table">
-    <thead><tr><th>
-      <div class="with-github-links">
-        <h3>{$ option.name $}</h3>
-        {$ github.githubLinks(option, versionInfo) $}
-      </div>
-    </th></tr></thead>
+    <thead>
+      <tr>
+        <th>
+          <div class="with-github-links">
+            <h3>{$ option.name $}</h3>
+            {$ github.githubLinks(option, versionInfo) $}
+          </div>
+        </th>
+      </tr>
+    </thead>
     <tbody>
       <tr>
         <td>
@@ -26,8 +30,9 @@
       </tr>
       <tr>
         <td>
-          <code-example language="ts" hideCopy="true" class="no-box api-heading{% if option.deprecated %} deprecated-api-item{% endif %}">
-          {$ option.name $}: {$ option.type | escape $}
+          <code-example language="ts" hideCopy="true"
+            class="no-box api-heading{% if option.deprecated %} deprecated-api-item{% endif %}">
+            {$ option.name $}{%- if option.isOptional  %}?{% endif -%}: {$ option.type | escape $}
           </code-example>
         </td>
       </tr>
@@ -46,4 +51,4 @@
   </table>
   {% endfor %}
 </section>
-{% endblock %}
+{% endblock %}

aio/tools/transforms/templates/api/includes/decorator-overview.html

@@ -10,7 +10,7 @@
     <tr class="option">
       <td>
         <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
-          <code>{$ option.name $}</code>
+          <code>{$ option.name $}{%- if option.isOptional  %}?{% endif -%}</code>
         </a>
       </td>
       <td>{$ option.shortDescription | marked $}</td>