Prop types don't work inside the instance when using Vue 2.7 #1537
Description
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
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
}
}
{ "compilerOptions": { "checkJs": true, "target": "es2020", "module": "es2020", "moduleResolution": "node", "jsx": "preserve" }, "vueCompilerOptions": { "target": 2.7 } }