🍣

Quasar Qtableのカラム定義でエラー

2023/01/13に公開

ドキュメントのサンプルをそのまま使おうとしたところtsの型エラーになりました。

使用したサンプルはこちらです。
https://quasar.dev/vue-components/table#basic-usage

q-tableを利用する部分ではこの様なエラーが表示されています。

The expected type comes from property 'columns' which is declared here on type 'ComponentProps<GlobalComponentConstructor<QTableProps, QTableSlots>>'

ドキュメントはjsで定義しているのでtsとして使っていて型エラーになっています。
ただ、これがドキュメントと合わせてみてもなかなか解消されず。

何か根本的に間違ってそうだなと思い、調べてみると下記記事が見つかりました。
https://stackoverflow.com/questions/69507784/type-script-definition-for-rows-and-columns-of-quasar-qtable

You can use QTableProps['columns'] and QTableProps['rows'].

const columns: QTableProps['columns'] = [
...
]
const rows: QTableProps['rows'] = [
...
]

それぞれに明示的に型指定することで解消できました🙌

Discussion