Code coloring wrong if destructuring defineProps results

[crystalfp]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.93.1

Vue version

3.5.7

TypeScript version

5.6.2

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 14.71 GB / 31.77 GB
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 128.0.6613.138
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

package.json dependencies

"dependencies": {
    "@mdi/js": "^7.4.47",
    "camera-controls": "^2.9.0",
    "chart.js": "^4.4.4",
    "commander": "^12.1.0",
    "custom-electron-titlebar": "^4.2.8",
    "electron-log": "^5.2.0",
    "fs-extra": "^11.2.0",
    "js-yaml": "^4.1.0",
    "pinia": "^2.2.2",
    "three": "^0.168.0",
    "tmp": "^0.2.3",
    "troika-three-text": "^0.49.1",
    "valibot": "^0.42.1",
    "vue": "^3.5.7",
    "vue-chartjs": "^5.3.1",
    "vue-router": "^4.4.5",
    "vuetify": "^3.7.2"
  },
  "devDependencies": {
    "@alasdair/eslint-plugin-max-len": "^1.1.0",
    "@electron-toolkit/preload": "^3.0.1",
    "@eslint/eslintrc": "^3.1.0",
    "@eslint/js": "^9.11.0",
    "@mdi/svg": "^7.4.47",
    "@stylistic/eslint-plugin": "^2.8.0",
    "@types/fs-extra": "^11.0.4",
    "@types/js-yaml": "^4.0.9",
    "@types/three": "^0.168.0",
    "@types/tmp": "^0.2.6",
    "@typescript-eslint/eslint-plugin": "^8.6.0",
    "@typescript-eslint/parser": "^8.6.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@zamiell/typedoc-plugin-not-exported": "^0.3.0",
    "dependency-cruiser": "^16.4.1",
    "electron": "^32.1.2",
    "electron-builder": "^25.0.5",
    "eslint": "^9.11.0",
    "eslint-formatter-codeframe": "^7.32.1",
    "eslint-import-resolver-typescript": "^3.6.3",
    "eslint-plugin-depend": "^0.11.0",
    "eslint-plugin-deprecate": "^0.8.5",
    "eslint-plugin-electron-extension": "^1.1.0",
    "eslint-plugin-eslint-comments": "^3.2.0",
    "eslint-plugin-import": "^2.30.0",
    "eslint-plugin-promise": "^7.1.0",
    "eslint-plugin-regexp": "^2.6.0",
    "eslint-plugin-security": "^3.0.1",
    "eslint-plugin-sonarjs": "^1.0.4",
    "eslint-plugin-tsdoc": "^0.3.0",
    "eslint-plugin-unicorn": "^55.0.0",
    "eslint-plugin-vue": "^9.28.0",
    "eslint-plugin-vuetify": "^2.4.0",
    "node-addon-api": "^8.1.0",
    "node-gyp": "^10.2.0",
    "postcss-html": "^1.7.0",
    "stylelint": "^16.9.0",
    "stylelint-config-recommended-scss": "^14.1.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^36.0.1",
    "stylelint-config-standard-scss": "^13.1.0",
    "stylelint-config-standard-vue": "^1.0.0",
    "typedoc": "^0.26.7",
    "typedoc-plugin-vue": "^1.2.0",
    "typescript": "^5.6.2",
    "vite": "^5.4.7",
    "vite-plugin-electron": "^0.28.8",
    "vite-plugin-electron-renderer": "^0.14.6",
    "vue-docgen-cli": "^4.79.0",
    "vue-eslint-parser": "^9.4.3",
    "vue-tsc": "^2.1.6"
  }

Steps to reproduce

Edit the following test.vue file.

<script setup lang="ts">

const {id} = defineProps<{

    /** Its own module id */
    id: string;
}>();

void id;
</script>

<template>
</template>

What is expected?

That syntax coloring is correct inside defineProps.

What is actually happening?

If I destructure the result of defineProps, the coloring inside the type parameter is wrong, everything is white.

Instead if I don't destructure the result or ignore it, everything is correctly colored.

I'm using the Monokai theme.

Link to minimal reproduction

No response

Any additional comments?

Opened wrongly in VSCode issues as #228495

[KazariEX]

Duplicate of #4811