Do typescript types have to be installed separately?

[ShawnFarsai]

I'm getting Unsafe assignment of an any value. ts errors all over the place and having to declare things myself. Is there separate module to install to get all the TS definitions?

import * as React from 'react';
import cn from 'classnames';
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { startCase, property } from 'lodash';

import { Tag, Progress } from '../../';

type Props<T extends object> = {
  defaultData: T[];
};

interface ColumnHelper<T> {
  accessor: (
    accessorFn: (row: T) => any,
    columnDef: {
      header: string;
      cell: (info: Info<T>) => React.ReactNode;
      // Add other properties, if needed
    },
  ) => ColumnHelper<T>;
}

interface Info<T> {
  getValue: () => DataValue;
  // Add other properties and methods, if needed
}

interface DataValue {
  type: 'tag' | 'progress' | 'text';
  icon?: string;
  variant?: string;
  value: string | number;
}

declare function createColumnHelper<T extends object>(): ColumnHelper<T>;

export const Table = <T extends object>({ defaultData }: Props<T>) => {
  const [data, setData] = React.useState<T[]>(() => [...defaultData]);

  const columnHelper = createColumnHelper<T>();

  const keys = Object.keys(defaultData[0]);

  const columns = keys.map(key => {
    return columnHelper.accessor(property(key), {
      header: startCase(key),
      cell: info => {
        const data = info.getValue();

        if (data.type === 'tag') {
          return (
            <Tag icon={data.icon} variant={data.variant}>
              {data.value}
            </Tag>
          );
        }

        if (data.type === 'progress') {
          return <Progress percentComplete={info.getValue()} size="xs" />;
        }

        return <span>{data.value}</span>;
      },
      // footer: info => info.column.id,
    });
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="flow-root">
      <div className="-mx-6 -my-2 overflow-x-auto overflow-y-auto lg:-mx-8">
        <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
          <div className="overflow-hidden shadow ring-1 ring-utility-black ring-opacity-5 sm:rounded-lg">
            <table className="min-w-full divide-y divide-neutral-200 text-neutral-700">
              <thead className="bg-neutral-50">
                {table.getHeaderGroups().map(headerGroup => (
                  <tr className="divide-x divide-neutral-300" key={headerGroup.id}>
                    {headerGroup.headers.map(header => (
                      <th
                        key={header.id}
                        className="px-3 py-2 text-xs font-medium text-left text-neutral-700"
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(header.column.columnDef.header, header.getContext())}
                      </th>
                    ))}
                  </tr>
                ))}
              </thead>
              <tbody className="divide-y bg-utility-white divide-neutral-200">
                {table.getRowModel().rows.map((row, rowIdx) => (
                  <tr
                    key={row.id}
                    className={cn(
                      'divide-x divide-neutral-200',
                      rowIdx % 2 === 0 ? undefined : 'bg-neutral-50',
                    )}
                  >
                    {row.getVisibleCells().map(cell => (
                      <td
                        key={cell.id}
                        className="px-3 py-1 text-sm font-normal text-neutral-700 whitespace-nowrap"
                      >
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};