Skip to content

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

Closed
@chearon

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 panelInfos
  • 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
  }
}

Activity

johnsoncodehk

johnsoncodehk commented on Jul 7, 2022

@johnsoncodehk
Member

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

chearon commented on Jul 7, 2022

@chearon
Author

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

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

zcf0508

zcf0508 commented on Aug 5, 2023

@zcf0508
Contributor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Prop types don't work inside the instance when using Vue 2.7 · Issue #1537 · vuejs/language-tools