antd table column 에 align: 'center' 속성 넣기

에러

Type '{ title: string; dataIndex: string; key: string; align: string; }[]' is not assignable to type '(ColumnGroupType<DataType> | ColumnType<DataType>)[]'.

Type '{ title: string; dataIndex: string; key: string; align: string; }[]' is not assignable to type '(ColumnGroupType<DataType> | ColumnType<DataType>)[]'.

Type '{ title: string; dataIndex: string; key: string; align: string; }' is not assignable to type 'ColumnType<DataType>'.
Types of property 'align' are incompatible.
Type 'string' is not assignable to type 'AlignType | undefined'.ts(2322)

InternalTable.d.ts(14, 5):The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & TableProps<DataType> & { children?: ReactNode; } & { ref?: Ref<HTMLDivElement> | undefined; }'

뭐 이런 에러가 떠서 columns에 

 

const sendColumns = [
    {
        title: '시간',
        dataIndex: 'time',
        key: 'time',
        align: 'center'
    },
    {
        title: '값',
        dataIndex: 'value',
        key: 'value',
        align:'center'
    }
];

 

이런식으로 써 뒀던 cloumns 가 위의 에러가 나면서 안먹혔다.

구글링해도 나랑 비슷한 사람이 없는건지 결과가 안 나와서 공식문서 코드를 보면서 해결했다. 

 

type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;

const sendColumns : (ColumnTypes[number] & { align: string; dataIndex: string })[] = [
    {
        title: '시간',
        dataIndex: 'time',
        key: 'time',
        align: 'center'
    },
    {
        title: '탈진 챔버 큐',
        dataIndex: 'value',
        key: 'value',
        align:'center'
    }
];

 

공식문서 예시 코드 코드 샌드박스 

https://codesandbox.io/s/q2mg54?file=/demo.tsx:3003-3070 

Editable Cells - antd@5.6.1 - CodeSandbox

 

align 이 기본 coulmn 의 속성이 아니어서 그런듯 ...? 

Parameters<T>

함수 타입 T의 매개변수 타입들의 튜플 타입을 구성합니다.

예제 (Example)

declare function f1(arg: { a: number, b: string }): void
type T0 = Parameters<() => string>;  // []
type T1 = Parameters<(s: string) => void>;  // [string]
type T2 = Parameters<(<T>(arg: T) => T)>;  // [unknown]
type T4 = Parameters<typeof f1>;  // [{ a: number, b: string }]
type T5 = Parameters<any>;  // unknown[]
type T6 = Parameters<never>;  // never
type T7 = Parameters<string>;  // 오류
type T8 = Parameters<Function>;  // 오류

Exclude<T,U>

T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성합니다.

예제 (Example)

type T0 = Exclude<"a" | "b" | "c", "a">;  // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;  // "c"
type T2 = Exclude<string | number | (() => void), Function>;  // string | number

 

TS에서 유틸리티 타입이라는걸 처음 알았다. 

 

https://typescript-kr.github.io/pages/utility-types.html#omittk

TypeScript 한글 문서

튜플에 대해서도 모르고있었던걸 반성 ..

 

tuple은 JavaScript에서는 지원하지 않는 데이터 타입이지만, TypeScript에서는 배열 타입을 보다 특수한 형태로 사용할 수 있는 tuple 타입을 지원합니다. tuple에 명시적으로 지정된 형식에 따라 아이템 순서를 설정해야 되고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용 가능합니다.

 

let book__name_price:[string, number] = ['카밍 시그널', 13320];

튜플은 배열이랑 비슷한데 지정된 형식에 따라 아이템 순서를 배치해야하는 배열이라 생각하면 될듯 ? 

 

 

핸드북의 설명을 참조해서 생각 해 보면 

type EditableTableProps = Parameters<typeof Table>[0];

EditableTableProps 에는 antd Table type 의 첫번째 아이템의 요소들이 튜플화 되어 담길것이다. 

 

type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;

 

ColumnTypes 에는 EditableTableProps['columns'] 중 undefined 을 제외한 나머지 타입들이 담길 것이다. 

 

const sendColumns : (ColumnTypes[number] & { align: string; dataIndex: string })[] = [
    {
        title: '시간',
        dataIndex: 'time',
        key: 'time',
        align: 'center'
    },
    {
        title: '탈진 챔버 큐',
        dataIndex: 'value',
        key: 'value',
        align:'center'
    }
];

type ColumnTypes = (ColumnGroupType<object> | ColumnType<object>)[ ]

ColumnTypes[number] 는 뭔뜻일까 .. 해서 보니 저건 저렇게 뜨는데

왜 ColumnTypes 말고 ColumnTypes[number] 로 지정해줘야 하는지는 모르겠다.. 

아무튼 CoulmnTypes는 Column에 지정 할수 있는 타입들을 나타내주는 것 같다. 

 

sendColumns의 타입을  ColumnTypes[number] 에 { align: string, dataIndex: string } 을 추가 해서 

이제 글자가 가운데 정렬 된 table을 볼 수 있게 된다.

 

 

 

공부하다가 어려운걸 발견할 때마다 기초의 중요성을 깨닫는다..

기초를 탄탄하게 공부하자 .. ㄱ-