Type features explicitly.

source/options/features.ts

@@ -1,3 +1,4 @@
+import Settings from '../settings.js';
 import {
   AboutSetting,
   AnonymizeUsernamesSetting,
@@ -10,66 +11,68 @@ import {
   UsernameColorsSetting,
 } from './components/exports.js';
 
-/**
+type Feature = {
- * The array of features available in TRX.
+  index: number;
- * * The index exists to sort the sidebar listing.
+  key: keyof RemoveIndexSignature<Settings['features']>;
- * * The key should match the corresponding key from `Settings.features`.
+  title: string;
- * * The value should be the header title for display.
+  component: () => any;
- * * The component function should return the corresponding settings components.
+};
- */
+
-export const features = [
+export const features: Feature[] = [
   {
     index: 0,
     key: 'anonymizeUsernames',
-    value: 'Anonymize Usernames',
+    title: 'Anonymize Usernames',
     component: () => AnonymizeUsernamesSetting,
   },
   {
     index: 0,
     key: 'autocomplete',
-    value: 'Autocomplete',
+    title: 'Autocomplete',
     component: () => AutocompleteSetting,
   },
   {
     index: 0,
     key: 'backToTop',
-    value: 'Back To Top',
+    title: 'Back To Top',
     component: () => BackToTopSetting,
   },
   {
     index: 0,
     key: 'hideVotes',
-    value: 'Hide Votes',
+    title: 'Hide Votes',
     component: () => HideVotesSetting,
   },
   {
     index: 0,
     key: 'jumpToNewComment',
-    value: 'Jump To New Comment',
+    title: 'Jump To New Comment',
     component: () => JumpToNewCommentSetting,
   },
   {
     index: 0,
     key: 'markdownToolbar',
-    value: 'Markdown Toolbar',
+    title: 'Markdown Toolbar',
     component: () => MarkdownToolbarSetting,
   },
   {
     index: 0,
     key: 'userLabels',
-    value: 'User Labels',
+    title: 'User Labels',
     component: () => UserLabelsSetting,
   },
   {
     index: 0,
     key: 'usernameColors',
-    value: 'Username Colors',
+    title: 'Username Colors',
     component: () => UsernameColorsSetting,
   },
   {
     index: 1,
     key: 'debug',
-    value: 'About & Info',
+    title: 'About & Info',
     component: () => AboutSetting,
   },
-].sort((a, b) => a.index - b.index);
+];
+
+features.sort((a, b) => a.index - b.index);

source/options/options.ts

@@ -97,7 +97,7 @@ class App extends Component<Props, State> {
     const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`;
 
     const asideElements = features.map(
-      ({key, value}) =>
+      ({key, title}) =>
         html`
           <li
             key=${key}
@@ -107,20 +107,20 @@ class App extends Component<Props, State> {
               this.setActiveFeature(key);
             }}"
           >
-            ${value}
+            ${title}
           </li>
         `,
     );
 
     const mainElements = features.map(
-      ({key, value, component}) =>
+      ({key, title, component}) =>
         html`
           <${component()}
             class="${activeFeature === key ? '' : 'trx-hidden'}"
             enabled="${enabledFeatures.has(key)}"
             feature=${key}
             key=${key}
-            title="${value}"
+            title="${title}"
           />
         `,
     );

source/types.d.ts

@@ -33,4 +33,15 @@ declare global {
     id: number;
     username: string;
   };
+
+  // Removes an index signature from a type, useful for getting all defined keys
+  // from an object that also has an index signature, like Settings.features.
+  // https://stackoverflow.com/a/66252656
+  type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K
+      ? never
+      : number extends K
+      ? never
+      : K]: T[K];
+  };
 }