Quasarの<q-table>のcolumnsの型をしっかりとつけたい
#Quasar #TypeScript #Vue #型
やりたいこと
code:ts
columns: ここに型をつけたい = [
{ name: 'calories', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
]
Data Table - Quasar Framework
型定義
以下のようにQColumn<Item>という型を作った。必要に応じてフィールド増やしていいと思う。
code:ts
export type QColumn<Item> =
{ K in keyof Item:
{
name: string,
field?: K,
format?: (v: ItemK) => string,
label?: string,
align?: 'left' | 'right' | 'center',
sortable?: boolean,
style?: string,
headerStyle?: string,
required?: boolean,
}
}keyof Item
使い方
<q-table :data="items">ように渡すitemsの型がMyItem[]であれば、
以下のようにcolumnsに型を与えることができます。
code:ts
columns: QColumn<MyItem>[] = [
{ name: 'calories', label: 'Calories', field: 'calories', sortable: true },
...