use Partial in defineProps, $props lose type

[Kanade-Lu]

Vue version

3.4.38

Link to minimal reproduction

https://play.vuejs.org/#eNqFUktu2zAQvcqAmySAIS3SReHKBvoJinTRGmmXBAJCGilMKJIgR7YBQTfokXqnXqFDOo5VIB+uODPvzbz5jOKj98V2QLEUVayD9gQRafBglO1WUlCUYi2t7r0LBCMEbBdA7gbbCBO0wfVwxvQzaRlkCUOraoTrr8EN/guS0gZGaYFfHVARNreKlhApaNt9kHaStnY2EvjgfIQVNNhqi5tkVY/E7pRrCRsVSCtTzSuwvml9fpEklCUc8o1zGitdPYo+z4UugIGfXd+jJaA7HZnV4N8/v+ckbYGw94ZVw04bA4N9sG5nIRWqysO0uDYbRxxbAFWjt2uA8T8Jxal9mKaqTJjc3gmdlRVvcqpyVk0seEPccau74j46y2vMU5Oidr3XBsMPT5onIsXyuAgplDFu9y37KAy4OPrrO6wfnvHfx33ySbEJGDFsUYqnGKnQIR3CVz+/457/T8HeNYNh9CvBG4zODEnjAfZpsA3LnuGy2ut8gHw0v+LVntDGY1NJaEJOGS8FHyMv9sXWT3Ivi3eZx8fDU7zdYkg5eYAcKC7fi+kfIUcQtw==

Steps to reproduce

use Partial<> and without use toRefs.

<script setup lang="ts">
import { ref, toRefs } from 'vue'

interface IGroupDetail {
    created_at: string;
}
const props = defineProps<{
    groupDetail: Partial<IGroupDetail>
}>()

// const { groupDetail } = toRefs(props) // Comment this code，groupDetail in template will unknown 

</script>

<template>
  <div>  {{ groupDetail?.created_at }}</div>
</template>

What is expected?

groupDetail type should be Partial

What is actually happening?

groupDetail type is unknown

System Info

No response

Any additional comments?

No response

[jh-leong]

This seems to only happen in the playground; I can't reproduce this locally in VSCode either.

Did you try updating the Vue - Official extension to the latest version?

[Kanade-Lu]

thanks for your reply. this question actually happen in my project,

 {
     "dependencies": { 
       "vue": "3.4.14",
     },
     "devDependencies": { 
        "typescript": "5.3.3",
     }
}

and my Vue - Official version is v2.0.28

[Kanade-Lu]

and my vscode

版本: 1.92.1 (Universal)
提交: eaa41d57266683296de7d118f574d0c2652e1fc4
日期: 2024-08-07T20:16:39.455Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Darwin arm64 22.5.0

[jh-leong]

Also, could you please provide your tsconfig.json

[Kanade-Lu]

Sorry for the late reply

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "./components.d.ts",
    "./auto-imports.d.ts"
  ],
  "typeAcquisition": { "include": ["jest"] },
  "exclude": ["node_modules", "./www", "./src/plugins"],
  "vueCompilerOptions": {
    "target": 3
  },
  "compilerOptions": {
    "outDir": "./www",
    "types": [
      "node",
      "lodash",
      "jest",
      "vite/client",
      "element-plus/global",
      "@lx-frontend/multi-map/types",
      "vue-component-type-helpers"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "strict": false,
    "jsx": "preserve",
    "jsxFactory": "h",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "NodeNext",
    "target": "esnext",
    "downlevelIteration": true,
    "moduleResolution": "NodeNext",
    "noImplicitAny": false,
    "skipLibCheck": true,
    "noImplicitThis": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleDetection": "auto",
    "lib": ["dom", "es2015", "es2017", "es2015.promise"],
    "sourceMap": true,
    "pretty": true
  }
}

[jh-leong]

It looks like this error is related to the strict option in tsconfig.json:

• In Vue - Official v2.0.28:
  • "strict": false results in groupDetail having an unknown type.
  • "strict": true allows typing to work correctly.
• In Vue - Official v2.1.0:
  • groupDetail gets an any type regardless of whether strict is true or false.

Hey @so1ve, could you please take a look at this?

[Kanade-Lu]

I get the same result(v2.0.28) in Vue - Official v2.1.2

[Kanade-Lu]

same issue #11272

seem can be fixed by #11644

[yyx990803]

I can't reproduce this with any of the combinations below:

• Vue 3.4.38 + Vue extension 2.1.2
• Vue 3.5.1 + Vue extension 2.1.2
• Vue 3.5.1 + Vue extension 2.1.6