vuejs / vuejs/core

Can't use generic prop type when definition includes intersection with generic params?

Open
#8,482 20 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

:cake: p2-nice-to-have has PR scope: compiler scope: script-setup
Dominant language
TypeScript
Stars
54.4k
Forks
9.2k
Avg merge
1d 5h
Merged PRs (30d)
140

Description

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqFUbFOwzAQ/ZWTBwJSaRamNI3EgsSGRMXkJW6urYXjs2ynVRTl3zmHQCMGOtnne/feu+dBPDu3PncoClGGvdcuQsDYOTC1PW6liEGKSloA3TryEV6IXiO2cPDUQrbO5zpRZAm2JxsiHIhgC0M6C3hagap9AdkJjaFsBTp86KCVwQKi7xDGjbTSlvm3PqtxwZzO1BEn7fJH9fyotG3YFhNLATl3y3wB5TLE3qSroqaHIU2rev959NTZpgBluGC5ZNQQm7qcdMTpYZwszNNiJRab3Qgn9g5TMNeVbdcq9JvEOTXfqcU3Ty6Uu4pRO7hj5CIGRWSwtgkvbYMHbWf4dZD5q+r+4f+cGn3mjMKJLuzul59Nzh8y2YNxLHNG/g1PjF+nxbYT

Steps to reproduce
type Foo = { foo: number; }
type SomeProps<T> = T & { isVisible: boolean }
What is expected?

this should be valid typescript:

https://www.typescriptlang.org/play?#code/C4TwDgpgBAYg9nKBeKBvKAzBAuKA7AVwFsAjCAJygF8AoUSKAZTiIgAVy4wBnAHgBUAfMij8oAMjRQAltwBqs6SQA2EXCQSqAhnmo0AxnDzdgmHExbtOPXvDjCU6LHFwBmADQz5ilWqjByAmgqAG4aaQwoAApnADpZBW4lVQBKKENjOFVY5TgAcxiEFJCgA

What is actually happening?

compile error:

1:55:02 AM [vite] Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/testdir/src/FooItem.vue
1  |  <script setup lang="ts">
2  |  type Foo = { foo: number }
3  |  type SomeProps<T> = T & { isVisible: boolean }
   |                      ^
4  |
5  |  defineProps<SomeProps<Foo>>()
  Plugin: vite:vue
  File: /testdir/src/FooItem.vue
      at ScriptCompileContext.error (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15841:11)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17966:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at /testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17947:16)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at resolveRuntimePropsFromType (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19312:20)
System Info
  System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 44.49 GB / 64.00 GB
    Shell: 5.1.4 - /usr/local/bin/bash
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Chrome Canary: 116.0.5806.0
    Firefox: 111.0
    Safari: 15.1
    Safari Technology Preview: 15.4
  npmPackages:
    vue: ^3.3.2 => 3.3.4
Any additional comments?

I'm not actually sure if I'm characterizing this correctly, but it seems like the sfc compiler cannot handle props whose type intersects one of its own generic parameters.

full pnpm lockfile if that's useful: https://gist.github.com/superfreddialpad/248efe40250d772938f31a2440e54e35

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Vue playground reproduction and compare it with the TypeScript playground example. Trace @vue/compiler-sfc's type-resolution path around resolveTypeElements and resolveRuntimePropsFromType, using the reported generic intersection failure as the guide. Done means the generic prop definition compiles without the reported unresolved-type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.