typescript - TS2322 Type 'string' kan ikke tilordnes typen '"left" | "center" | "right" | undefined'

Jeg er ny med Typescript. Jeg bruker ant design versjon 4.0 og jeg vil legge til align-egenskapen til min kolonne, men i columns-attributtet til Table viser det denne feilen. Jeg vet at jeg bør matche typen til variabelen med AlignType, men jeg vet ikke nøyaktig hvordan jeg skal gjøre dette. Takk på forhånd.

interface ColumnSharedType<RecordType> {
    title?: React.ReactNode;
    key?: Key;
    className?: string;
    fixed?: FixedType;
    onHeaderCell?: GetComponentProps<ColumnsType<RecordType>[number]>;
    ellipsis?: boolean;
    align?: AlignType;
}
export interface ColumnGroupType<RecordType> extends ColumnSharedType<RecordType> {
    children: ColumnsType<RecordType>;
}
export declare type AlignType = 'left' | 'center' | 'right';

  const columns = [
    {
      title: 'State',
      dataIndex: 'state',
      render: (text: any) => <a>{text}</a>,
      align: 'left', // it need type AlignType 
    },
]

  return (
    <Table className="state__table" columns={columns} dataSource={data}/>
    // TS2322 Type 'string' is not assignable to type '"left" | "center" | "right" | undefined'.
  )

ps: Jeg legger til ny variabel

  const right: AlignType = 'right';
  const columns = [
    {
      title: 'State',
      dataIndex: 'state',
      render: (text: any) => <a>{text}</a>,
      align: right,
    },
]

og det fungerer, men jeg er ikke sikker på om dette er en god løsning.

Svar #1

Å lage en ny variabel for klarhet er ikke den verste løsningen, du kunne også, hvis du ønsket å strømlinjeforme det, gjort noe som dette.

  const columns = [
{
  title: 'State',
  dataIndex: 'state',
  render: (text: any) => <a>{text}</a>,
  align: 'right' as AlignType,
}

Du kan lese mer om 'as'-operatoren her

Svar #2

const columns = [
  {
    title: "time",
    dataIndex: "time",
    width: "20%",
    editable: false,
    align: "center", 
    // 修改为  align: "center" as "center",
    onCell: (record: RowSpanData) => {
      return {
        rowSpan: record.rowSpan,
      };
    },
  },]

Relaterte artikler