MaterialTable列设置不可编辑时类型不兼容错误求助

Hey, let's break down this TypeScript error you're encountering—it's rooted in string literal type mismatches with Material Table's type definitions.

错误原因 #

When you set editable: 'never' or editable: 'always' in your column config, TypeScript is treating those values as generic string types, not the specific string literal types that Material Table expects.

Looking at the type definition for Material Table's Column interface, the editable property is restricted to a narrow set of literal values: "never" | "always" | "onUpdate" | "onAdd" (plus a function or undefined). Generic strings don't match this narrow type, hence the "incompatible types" error.

This didn't pop up when you weren't using column-level editable because TypeScript wasn't validating that specific property at the time.

解决办法 #

Here are a few straightforward fixes to resolve this:

1. Explicitly Type Your Columns

Define your columns state with Material Table's Column type (using your IReservedStockItem interface) to enforce correct type checking:

import { Column } from 'material-table';

const [columns, setColumns] = useState<Column<IReservedStockItem>[]>([
  {title: "Number", field: 'itemNumber', editable: 'never'},
  {title: "Description", field: 'itemDescription', editable: 'never'},
  {title: "Amount", field: 'amount', editable:'always'},
]);

2. Use as const Assertions

Add as const to each column object to tell TypeScript to treat the string values as literal types instead of generic strings:

const [columns, setColumns] = useState([
  {title: "Number", field: 'itemNumber', editable: 'never'} as const,
  {title: "Description", field: 'itemDescription', editable: 'never'} as const,
  {title: "Amount", field: 'amount', editable:'always'} as const,
]);

3. Disable Strict Literal Checks (Not Recommended)

As a last-resort temporary fix, you can adjust your tsconfig.json to loosen TypeScript's strictness:

{
  "compilerOptions": {
    "noStrictGenericChecks": true
  }
}

This isn't ideal though, as it reduces type safety across your project.

内容的提问来源于stack exchange，提问作者Soquar