Skip to content

Wrapping the output of defineProps in a function will break TS in template #5791

@VividLemon

Description

@VividLemon

Vue - Official extension or vue-tsc version

vue-tsc 3.1.5

VSCode version

1.106.3

Vue version

3.5.13

TypeScript version

5.9.3

System Info

System:
    OS: Linux 6.17 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 17.96 GB / 30.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 24.0.1 - /run/user/1000/fnm_multishells/14388_1764623966366/bin/node
    npm: 11.3.0 - /run/user/1000/fnm_multishells/14388_1764623966366/bin/npm
    pnpm: 10.13.1 - /home/issayah/.local/share/pnpm/pnpm
    bun: 1.2.2 - /home/issayah/.bun/bin/bun
    Deno: 2.4.4 - /home/issayah/.deno/bin/deno
  Browsers:
    Firefox: 145.0.1
    Firefox Developer Edition: 145.0.1

package.json dependencies

"devDependencies": {
    "@floating-ui/core": "^1.7.3",
    "@floating-ui/vue": "^1.1.9",
    "@rushstack/eslint-patch": "^1.15.0",
    "@tsconfig/node22": "^22.0.5",
    "@types/node": "^22.19.1",
    "@vitejs/plugin-vue": "^6.0.2",
    "@vitest/coverage-v8": "^3.2.4",
    "@vitest/eslint-plugin": "1.1.43",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.6.0",
    "@vue/runtime-core": "^3.5.25",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "@vueuse/core": "^13.9.0",
    "@vueuse/integrations": "^13.9.0",
    "@vueuse/shared": "^13.9.0",
    "bootstrap": "^5.3.8",
    "eslint": "^9.39.1",
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-vue": "^10.6.2",
    "focus-trap": "^7.6.6",
    "happy-dom": "^18.0.1",
    "prettier": "^3.7.3",
    "publint": "^0.3.15",
    "sass": "^1.94.2",
    "typescript": "^5.9.3",
    "unplugin-vue-components": "^28.8.0",
    "vite": "^7.2.6",
    "vite-plugin-dts": "^4.5.4",
    "vite-plugin-vue-devtools": "^7.7.9",
    "vitest": "^3.2.4",
    "vue": "^3.5.25",
    "vue-router": "^4.6.3",
    "vue-tsc": "^3.1.5"
  },

Steps to reproduce

Wrap the output of defineProps that uses a generic prop then attempt to use that wrapper in the template. It will fail to get the correct type in the template, but not in the script

What is expected?

The TS of the value should be able to determine what the object looks like

What is actually happening?

It doesn't get the correct type for any wrap for the output of defineProps

Right now for example, it outputs

DistributeRef<DefineProps<LooseRequired<__VLS_Props>, [T] extends [boolean] ? "myProp" : never>>
const props: DefineProps<LooseRequired<__VLS_Props>, [T] extends [boolean] ? "myProp" : never>

Link to minimal reproduction

https://play.vuejs.org/#eNqFU99r2zAQ/ldueokLbQzLnjIn0I2ObbC1ZIG9CIKxL647WxKSnCYE/+87SbZnh659MPjuvvvuux86s1ul5ocG2ZIlJtOlsmDQNmrNRVkrqS2cQeMeWthrWcOMoLMh9FnWqvPPY2c4ptlHLrjIpDAWalPAyuVHs69YVRJ+S13l72ZXXCRxKEeFyLBYqyq1SBZA4nmX9elGaalWnBENZxCHYClUY+FwU8scq0kwiUc07JpZQyr2ZTF/MlJQg2eXz1lG7GWF+l7ZklRytgQfcbGURD5/9z6rG7zu/dkjZn9e8D+Zo/Nx9qDRoD4gZ0PMprpAG8J3v37ikf6HIKlvKkK/EtygkVXjNAbYp0bkJHuE82q/+V2Uotiau6NFYfqmnFCHbD2eM9qNG+z/Wv8ndzH/4PO4aGmK/V4vLwSqVBQ0f0s0UKBAXWZkbjkb3Y6bdWMxn55Pfx47t19DF5LjvhT44KzEC6pPzljCljSsIzqXPoUyMjTGQykx2awjfxBL2FzRB6s1ePsl/HtKiK4cJBSesHq6MToKIKo9wjiKCaXTNoovKH5JviNfP4co1PeIeWjyjbeQlwf/Q79q7YcYhuUpaH3nrl7HBm2bxO71dhk/TvCsU6VQe+xr0NtBpXuxqFFkCHLf7SIs0D7ihG93SXJPCD2GhLF1JS/AX0qRVgNoMYCgRyVxaH/6stu/pAebkg==

Any additional comments?

This is the way that it's used, and can somewhat explain why we are not using props directly.
https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/d4a64026a6bd476b48a29466c57fe2e6cdaa0b8c/packages/bootstrap-vue-next/src/components/BTable/BTable.vue#L269

In this we have some defaults that the user specifies to the library. Perplexingly, for some reason the linked file now works just fine. But all the reproductions I've made that are simple show the error, while that real file does not have any error.

Metadata

Metadata

Assignees

No one assigned

    Labels

    good reproduction ✨This issue provides a good reproduction, we will be able to investigate it first🔩 p2-edge-case

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions