Unexpected TS problem with q-table

What happened?

Creating a project from scratch with the quasar CLI and adding:

    <q-table :columns="cols"> </q-table>
  </q-page>

    const cols = ref([
      { label: 'hello', name: '123', field: '123', align: 'left' },
    ]);

The problem emerges in VS Code when I add the “align” field to the column data object:

Type '{ label: string; name: string; field: string; align: string; }[]' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean; align?: "left" | "right" | "center"; sortable?: boolean; sort?: (a: any, b: any, rowA: any, rowB: any) => number; ... 5 more ...; headerClasses?: string; }[]'.
  Type '{ label: string; name: string; field: string; align: string; }' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean; align?: "left" | "right" | "center"; sortable?: boolean; sort?: (a: any, b: any, rowA: any, rowB: any) => number; ... 5 more ...; headerClasses?: string; }'.

This might be a Volar issue, I don’t know.

What did you expect to happen?

I expected no problems by adding the align field

Reproduction URL

n/a

How to reproduce?

create an app with vite and typescript usning the quasar cli. then add a q-table: <q-table :columns="cols"> </q-table> and create a variable with the align property like this: const cols = ref([ { label: ‘hello’, name: ‘123’, field: ‘123’, align: ‘left’ }, ]);

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[robfordww]

solved it:

 const cols: QTableProps['columns'] = [
      { label: 'hello', name: '123', field: '123', align: 'left' },
    ];

[robfordww]

@yusufkandemir Thanks for your answer, but I don’t think it addresses this problem:

const cols = [{ label: 'hello', name: '123', field: '123' }];  // is no errors in VS code
const cols = [{ label: 'hello', name: '123', field: '123', align: 'left' }];  // creates the following raw message in the 

[{
	"resource": "/C:/Users/___/dev/quasar-project/src/pages/IndexPage.vue",
	"owner": "_generated_diagnostic_collection_name_#1",
	"code": "2322",
	"severity": 8,
	"message": "Type '{ label: string; name: string; field: string; align: string; }[]' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean; align?: \"left\" | \"right\" | \"center\"; sortable?: boolean; sort?: (a: any, b: any, rowA: any, rowB: any) => number; ... 5 more ...; headerClasses?: string; }[]'.\n  Type '{ label: string; name: string; field: string; align: string; }' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean; align?: \"left\" | \"right\" | \"center\"; sortable?: boolean; sort?: (a: any, b: any, rowA: any, rowB: any) => number; ... 5 more ...; headerClasses?: string; }'.",
	"source": "ts",
...
...
			"message": "The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & VNodeProps & AllowedComponentProps & ComponentCustomProps & QTableProps'",
			"resource": "/c:/Users/___/dev/quasar-project/node_modules/quasar/dist/types/index.d.ts"
		}
	]
}]

But why. ‘align’ is perfectly fine according to documentattion, and even type def files as far as I can see.