Prop types don't work inside the instance when using Vue 2.7

[chearon]

I'm having issues with prop types being any in this small repro. In a bigger project, they always show as never. If I switch to Vue 3, the problem goes away. I tried various things, like using @vue/runtime-dom, setting vueCompilerOptions.target, casting with PropType, and more, but nothing worked, so I think it's really broken. I tried 0.38.2 and 0.36.

Component.vue:

<template>
  <div>
    {{thestring}} <!-- hover here says `string` correctly -->
    {{thenumber}} <!-- hover here says `number` correctly -->
  </div>
</template>

<script>
import {defineComponent} from "vue";

export default defineComponent({
  props: {thestring: String},
  data: () => ({thenumber: 0}),
  created() {
    this.thestring; // hover says `any`!
    this.thenumber; // hover says `number`
  },
});
</script>

jsconfig.json

{ "compilerOptions": { "checkJs": true, "target": "es2020", "module": "es2020", "moduleResolution": "node", "jsx": "preserve" }, "vueCompilerOptions": { "target": 2.7 } }

package.json

{ "dependencies": { "vue": "2.7.2" } }

Volar: show doctor panel

Infos

• vscode.version: 1.68.1
• vscode.typescript.version: 4.7.3
• vscode.typescript-extension.actived: true
• vue-language-features.version: 0.38.2
• typescript-vue-plugin.version: undefined
• vetur.actived: false
• workspace.vue-tsc.version: undefined
• workspace.typescript.version: undefined
• workspace.vue.version: 2.7.2
• workspace.@vue/runtime-dom.version: undefined
• takeover-mode.enabled: false

tsconfigs

file:///Users/caleb/Code/test-volar/jsconfig.json

{
  "compilerOptions": {
    "checkJs": true,
    "target": "es2020",
    "module": "es2020",
    "moduleResolution": "node",
    "jsx": "preserve"
  },
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Configuration

{
  "volar": {
    "vueserver": {
      "useSecondServer": false,
      "maxOldSpaceSize": null
    },
    "codeLens": {
      "references": true,
      "pugTools": false,
      "scriptSetupTools": false
    },
    "icon": {
      "splitEditors": true,
      "preview": true
    },
    "autoWrapParentheses": true,
    "autoCompleteRefs": false,
    "takeOverMode": {
      "enabled": "auto"
    },
    "completion": {
      "preferredTagNameCase": "auto",
      "preferredAttrNameCase": "auto-kebab",
      "autoImportComponent": true
    },
    "preview": {
      "script": {
        "vite": "node {VITE_BIN} --port={PORT}",
        "nuxi": "node {NUXI_BIN} dev --port {PORT}"
      },
      "port": 3333,
      "backgroundColor": "#f0f0f0",
      "transparentGrid": false
    },
    "splitEditors": {
      "layout": {
        "left": [
          "script",
          "scriptSetup",
          "styles"
        ],
        "right": [
          "template",
          "customBlocks"
        ]
      }
    }
  },
  "typescript": {
    "tsdk": "",
    "disableAutomaticTypeAcquisition": false,
    "enablePromptUseWorkspaceTsdk": false,
    "npm": "",
    "check": {
      "npmIsInstalled": true
    },
    "referencesCodeLens": {
      "enabled": false,
      "showOnAllFunctions": false
    },
    "implementationsCodeLens": {
      "enabled": false
    },
    "tsserver": {
      "enableTracing": false,
      "log": "off",
      "pluginPaths": [],
      "trace": "off",
      "useSeparateSyntaxServer": true,
      "useSyntaxServer": "auto",
      "maxTsServerMemory": 3072,
      "experimental": {
        "enableProjectDiagnostics": false
      },
      "watchOptions": {}
    },
    "suggest": {
      "completeFunctionCalls": false,
      "includeAutomaticOptionalChainCompletions": true,
      "includeCompletionsForImportStatements": true,
      "includeCompletionsWithSnippetText": true,
      "paths": true,
      "autoImports": true,
      "completeJSDocs": true,
      "jsdoc": {
        "generateReturns": true
      },
      "enabled": true,
      "classMemberSnippets": {
        "enabled": true
      },
      "objectLiteralMethodSnippets": {
        "enabled": true
      }
    },
    "inlayHints": {
      "parameterNames": {
        "enabled": "none",
        "suppressWhenArgumentMatchesName": true
      },
      "parameterTypes": {
        "enabled": false
      },
      "variableTypes": {
        "enabled": false,
        "suppressWhenTypeMatchesName": true
      },
      "propertyDeclarationTypes": {
        "enabled": false
      },
      "functionLikeReturnTypes": {
        "enabled": false
      },
      "enumMemberValues": {
        "enabled": false
      }
    },
    "reportStyleChecksAsWarnings": true,
    "validate": {
      "enable": true
    },
    "format": {
      "enable": true,
      "insertSpaceAfterCommaDelimiter": true,
      "insertSpaceAfterConstructor": false,
      "insertSpaceAfterSemicolonInForStatements": true,
      "insertSpaceBeforeAndAfterBinaryOperators": true,
      "insertSpaceAfterKeywordsInControlFlowStatements": true,
      "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
      "insertSpaceBeforeFunctionParenthesis": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
      "insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
      "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
      "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
      "insertSpaceAfterTypeAssertion": false,
      "placeOpenBraceOnNewLineForFunctions": false,
      "placeOpenBraceOnNewLineForControlBlocks": false,
      "semicolons": "ignore"
    },
    "tsc": {
      "autoDetect": "on"
    },
    "locale": "auto",
    "suggestionActions": {
      "enabled": true
    },
    "preferences": {
      "quoteStyle": "auto",
      "importModuleSpecifier": "shortest",
      "importModuleSpecifierEnding": "auto",
      "jsxAttributeCompletionStyle": "auto",
      "includePackageJsonAutoImports": "auto",
      "renameShorthandProperties": true,
      "useAliasesForRenames": true
    },
    "updateImportsOnFileMove": {
      "enabled": "prompt"
    },
    "autoClosingTags": true,
    "surveys": {
      "enabled": true
    },
    "workspaceSymbols": {
      "scope": "allOpenProjects"
    }
  },
  "javascript": {
    "referencesCodeLens": {
      "enabled": false,
      "showOnAllFunctions": false
    },
    "suggest": {
      "completeFunctionCalls": false,
      "includeAutomaticOptionalChainCompletions": true,
      "includeCompletionsForImportStatements": true,
      "names": true,
      "paths": true,
      "autoImports": true,
      "completeJSDocs": true,
      "jsdoc": {
        "generateReturns": true
      },
      "enabled": true,
      "classMemberSnippets": {
        "enabled": true
      }
    },
    "inlayHints": {
      "parameterNames": {
        "enabled": "none",
        "suppressWhenArgumentMatchesName": true
      },
      "parameterTypes": {
        "enabled": false
      },
      "variableTypes": {
        "enabled": false,
        "suppressWhenTypeMatchesName": true
      },
      "propertyDeclarationTypes": {
        "enabled": false
      },
      "functionLikeReturnTypes": {
        "enabled": false
      },
      "enumMemberValues": {
        "enabled": false
      }
    },
    "validate": {
      "enable": true
    },
    "format": {
      "enable": true,
      "insertSpaceAfterCommaDelimiter": true,
      "insertSpaceAfterConstructor": false,
      "insertSpaceAfterSemicolonInForStatements": true,
      "insertSpaceBeforeAndAfterBinaryOperators": true,
      "insertSpaceAfterKeywordsInControlFlowStatements": true,
      "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
      "insertSpaceBeforeFunctionParenthesis": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
      "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
      "insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
      "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
      "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
      "placeOpenBraceOnNewLineForFunctions": false,
      "placeOpenBraceOnNewLineForControlBlocks": false,
      "semicolons": "ignore"
    },
    "implicitProjectConfig": {
      "checkJs": false,
      "experimentalDecorators": false
    },
    "suggestionActions": {
      "enabled": true
    },
    "preferences": {
      "quoteStyle": "auto",
      "importModuleSpecifier": "shortest",
      "importModuleSpecifierEnding": "auto",
      "jsxAttributeCompletionStyle": "auto",
      "renameShorthandProperties": true,
      "useAliasesForRenames": true
    },
    "updateImportsOnFileMove": {
      "enabled": "prompt"
    },
    "autoClosingTags": true
  }
}

[johnsoncodehk]

Hi @chearon, this is ThisType behavior of vue v2.7 defineComponent, you can reproduce it in .ts file.

// test.ts
import {defineComponent} from "vue";

export default defineComponent({
  props: {thestring: String},
  data: () => ({thenumber: 0}),
  created() {
    this.thestring; // hover says `any`!
    this.thenumber; // hover says `number`
  },
});

[chearon]

I didn't even think to try that... thank you.

For anyone looking, the closest upstream issue is vuejs/vue#12628

[zcf0508]

vuejs/vue#13063