FreeGridv1.15.1English

TypeScript: 행 타입 지정

createGrid<Order>()와 ColumnDef<Order>로 행 타입을 정하면 필드 이름과 중첩 경로가 자동완성·검사되고, 행 콜백과 API 메서드가 그 타입을 씁니다.

타입은 패키지에 들어 있습니다. 기본으로 행은 느슨한 객체라 어떤 필드 이름이든 받습니다. 그리드에 행 타입을 주면 편집기가 필드 이름을 자동완성하고, 오타를 잡고, 모든 콜백에 타입을 붙입니다.

import { createGrid, type ColumnDef } from '@freegridjs/core';

interface Order {
  id: number;
  customer: { name: string; address?: { city: string } };
  total: number;
  placedAt: Date;
}

const columns: ColumnDef<Order>[] = [
  { field: 'id', type: 'number' },
  { field: 'customer.address.city', editable: true },     // nested paths complete too
  { field: 'total', type: 'number', valueFormatter: p => `${p.formatted} (${p.row?.customer.name})` },
  { field: 'placedAt', type: 'date', validate: (v, row) => (row.total > 0 ? true : 'Empty order') },
  // { field: 'totl' }   ← error: not a field of Order
];

const grid = createGrid<Order>(el, { columns, data: orders, getRowId: o => String(o.id) });

const o = grid.getRowById('7');          // Order | undefined
const shown: Order[] = grid.getDisplayedRows();

타입이 붙는 곳

위치Order를 주면
fieldOrder의 키와 3단계까지의 경로('customer.address.city'). Date와 배열은 경로가 아닌 값
컬럼 콜백valueGetter, valueFormatter, valueParser, renderer, cellClass, tooltip, validate, editable, button, link, comparator, rowSpan이 row: Order를 받음
그리드 옵션data, getRowId, rowStyle, rowClass, detailRenderer, detailExpanded, isRowSelectable, getRowHeight, 고정 행
APIgetData, getSelectedRows, getRowById, getDisplayedRows, forEachRow, addRows, getModifiedRows 등이 Order 사용
이벤트이벤트의 row는 느슨한 객체로 남음. 필요한 곳에서 지정(e.row as Order)

직접 줄 때만

행 타입은 createGrid<Order>(…)로 줄 때만 정해지고, data에서 추측하지 않습니다. const api: GridApi = createGrid(el, { data: [...] }) 같은 기존 코드는 그대로 컴파일되고, 데이터 리터럴에 우연히 없는 필드를 쓰는 컬럼도 오류가 아닙니다.

React, Vue, Svelte, Angular에서

컴포넌트는 타입이 있는 컬럼을 그대로 받습니다. 컬럼 목록을 쓰는 곳과 ref·ready 이벤트로 받는 API에 타입을 주세요.

import { FreeGrid } from '@freegridjs/react';
import type { ColumnDef, GridApi } from '@freegridjs/core';

const columns: ColumnDef<Order>[] = [{ field: 'customer.name' }, { field: 'total', type: 'number' }];

function Orders({ orders }: { orders: Order[] }) {
  const grid = useRef<GridApi<Order> | null>(null);
  return <FreeGrid ref={grid} columns={columns} data={orders} getRowId={(o: Order) => String(o.id)} />;
}

직접 경로 목록이 필요하면(예: 컬럼 선택기) FieldOf<Order>와 FieldPath<Order>를 가져다 쓸 수 있습니다.

이 페이지에 대한 질문

FreeGrid에 TypeScript 타입이 있나요?

네, 패키지에 들어 있습니다. 타입 인자가 없으면 예전처럼 행이 느슨한 객체이고, createGrid<Order>()와 ColumnDef<Order>[]를 쓰면 필드 이름이 검사되고 콜백이 Order를 받습니다.