Improve TColumnConfig typing on columns that extend TableColumnTextBase (#1997)

# Pull Request

## 🤨 Rationale

Resolves #1964 

## 👩‍💻 Implementation

`TableColumnTextBase` cannot simply be made generic because TypeScript
doesn't support generics and mixins together:
microsoft/TypeScript#26154.

Therefore, each concrete instance of `TableColumnTextBase` should add
its own mixins in a way that they get mixed into
`TableColumnTextBase<TColumnConfig>` rather than `TableColumn`. To avoid
code duplicate, I created a function, `mixinTextBase`, that mixes in the
appropriate mixins for `TableColumnTextBase`.

## 🧪 Testing

- Unit tests still pass
- Manually verified that the type of `this.columnInternals.columnConfig`
is correct for a column using `mixinTextBase`
- Sanity tested examples in storybook to make sure columns still behave
as expected

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.

Author: mollykreis

change/@ni-nimble-components-c9468196-58c9-4afc-b6b4-d40fe360015e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Improve TColumnConfig typing on columns that extend TableColumnTextBase",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/date-text/index.ts

@@ -6,7 +6,7 @@ import { attr } from '@microsoft/fast-element';
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { TableColumnTextBase, mixinTextBase } from '../text-base';
 import { TableColumnSortOperation, TableColumnValidity } from '../base/types';
 import { tableColumnDateTextGroupHeaderViewTag } from './group-header-view';
 import { tableColumnDateTextCellViewTag } from './cell-view';
@@ -49,7 +49,9 @@ declare global {
 /**
  * The table column for displaying dates/times as text.
  */
-export class TableColumnDateText extends TableColumnTextBase {
+export class TableColumnDateText extends mixinTextBase(
+    TableColumnTextBase<TableColumnDateTextColumnConfig>
+) {
     /** @internal */
     public validator = new TableColumnDateTextValidator(this.columnInternals);
 

packages/nimble-components/src/table-column/duration-text/index.ts

@@ -5,14 +5,14 @@ import {
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
 import { TableColumnSortOperation } from '../base/types';
 import { tableColumnDurationTextCellViewTag } from './cell-view';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
 import { lang } from '../../theme-provider';
 import { DurationFormatter } from './models/duration-formatter';
 import { tableColumnDurationTextGroupHeaderViewTag } from './group-header-view';
 import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
+import { TableColumnTextBase, mixinTextBase } from '../text-base';
 
 export type TableColumnDurationTextCellRecord = TableNumberField<'value'>;
 export interface TableColumnDurationTextColumnConfig
@@ -29,7 +29,9 @@ declare global {
 /**
  * The table column for displaying a duration value as text.
  */
-export class TableColumnDurationText extends TableColumnTextBase {
+export class TableColumnDurationText extends mixinTextBase(
+    TableColumnTextBase<TableColumnDurationTextColumnConfig>
+) {
     private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {
         handleChange: () => {
             this.updateColumnConfig();

packages/nimble-components/src/table-column/number-text/index.ts

@@ -13,7 +13,7 @@ import {
 import { styles } from '../base/styles';
 import { template } from './template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { TableColumnTextBase, mixinTextBase } from '../text-base';
 import { TableColumnSortOperation, TableColumnValidity } from '../base/types';
 import { tableColumnNumberTextGroupHeaderTag } from './group-header-view';
 import { tableColumnNumberTextCellViewTag } from './cell-view';
@@ -44,7 +44,9 @@ declare global {
 /**
  * The table column for displaying numbers as text.
  */
-export class TableColumnNumberText extends TableColumnTextBase {
+export class TableColumnNumberText extends mixinTextBase(
+    TableColumnTextBase<TableColumnNumberTextColumnConfig>
+) {
     /** @internal */
     public validator = new TableColumnNumberTextValidator(this.columnInternals);
 

packages/nimble-components/src/table-column/text-base/index.ts

@@ -1,15 +1,15 @@
 import { attr } from '@microsoft/fast-element';
-import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { TableColumn } from '../base';
+import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 import { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';
 
 /**
  * The base class for table columns that display fields of any type as text.
  */
-export abstract class TableColumnTextBase extends mixinGroupableColumnAPI(
-    mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(TableColumn))
-) {
+export abstract class TableColumnTextBase<
+    TColumnConfig
+> extends TableColumn<TColumnConfig> {
     @attr({ attribute: 'field-name' })
     public fieldName?: string;
 
@@ -18,3 +18,18 @@ export abstract class TableColumnTextBase extends mixinGroupableColumnAPI(
         this.columnInternals.operandDataRecordFieldName = this.fieldName;
     }
 }
+
+type TableColumnBaseConstructor<TColumnConfig> = abstract new (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...args: any[]
+) => TableColumnTextBase<TColumnConfig>;
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any
+export function mixinTextBase<
+    TBase extends TableColumnBaseConstructor<TColumnConfig>,
+    TColumnConfig
+>(base: TBase) {
+    return mixinGroupableColumnAPI(
+        mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(base))
+    );
+}

packages/nimble-components/src/table-column/text/index.ts

@@ -2,7 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableStringField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { TableColumnTextBase, mixinTextBase } from '../text-base';
 import { TableColumnSortOperation } from '../base/types';
 import { tableColumnTextGroupHeaderViewTag } from './group-header-view';
 import { tableColumnTextCellViewTag } from './cell-view';
@@ -24,7 +24,9 @@ declare global {
 /**
  * The table column for displaying string fields as text.
  */
-export class TableColumnText extends TableColumnTextBase {
+export class TableColumnText extends mixinTextBase(
+    TableColumnTextBase<TableColumnTextColumnConfig>
+) {
     public placeholderChanged(): void {
         this.columnInternals.columnConfig = {
             placeholder: this.placeholder