[Bug] TypeScript error ts(2322) when define sub columns

[KiddoV]

Version

^0.25.0

Link to Minimal Reproduction

N/A

Steps to Reproduce

Define the table options like:

const ITEM_TB_OPTS: ListTableConstructorOptions = {
    frozenColCount: 1,
    rightFrozenColCount: 1,
    tooltip: {
        isShowOverflowTextTooltip: true, //Show full cell content in a tooltip when overflow
    },
    columns: [
        {field: "itemId", title: "Item ID", width: 55, style: {bgColor: "rgba(255,255,255,.8)"}, headerIcon: "lock"},
        {field: "testFirmwareInfo", title: "Test Firmware",
            columns: [
                {field: "version", title: "Version", width: 60},
                {field: "freq", title: "Frequency", width: 45},
                {field: "targetXdot", title: "Target XDOT", width: 50},
            ]
        },
        //Action column
        {field: "_", width: 45, maxWidth: 45}
    ],
}

Got error in VSCode:

Type '{ field: string; title: string; columns: { field: string; title: string; width: number; }[]; }' is not assignable to type 'ColumnDefine'.
  Type '{ field: string; title: string; columns: { field: string; title: string; width: number; }[]; }' is not assignable to type '{ headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); headerType?: "text"; ... 17 more ...; hideColumnsSubHeader?: boolean; } & { ...; }'.
    Type '{ field: string; title: string; columns: { field: string; title: string; width: number; }[]; }' is not assignable to type '{ style?: never; cellType?: never; field?: never; fieldKey?: never; fieldFormat?: never; width?: never; minWidth?: never; maxWidth?: never; tree?: never; icon?: never; mergeCell?: never; customRender?: never; customLayout?: never; editor?: never; aggregation?: never; }'.
      Types of property 'field' are incompatible.
        Type 'string' is not assignable to type 'never'.ts(2322)

Current Behavior

VSCode display error as above, but the table seems to render normally.

Expected Behavior

No error in VSCode

Environment

- OS: Windows 10
- Browser: Webview2
- Framework: Svelte

Any additional comments?

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "jsx": "preserve",
    /**
     * Typechecks JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    //Add this if err: Cannot find module 'X' Error in TypeScript
    "moduleResolution": "node",
    /*
    Add this if error: Cannot find type definition file for 'expect'. The file is in the program because: Entry point for implicit type library 'expect'
    https://stackoverflow.com/a/54232554/7144052
    */
    "types": ["node", "svelte", "jquery"]
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.svelte"
  ],
  //Add this if Typescript error "Cannot write file '...' because it would overwrite input file."
  "exclude": [
    "src/libs/*"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

[fangsmile]

Only the lowest node needs to set a field @KiddoV

[KiddoV]

I see, and I didn't know we can assign field with flat object format (with the dot) like:

{
    title: "Full Name",
    columns: [
        {
            field: "fullName.firstName",
            title: "First Name",
            width: 200
        },
        {
            field: "fullName.lastName",
            title: "Last Name",
            width: 200
        }

    ]
}

I guess the docs wasn't clear enough. Thanks!