[Vue 3] typed props as unknown

[Ribeiro-Tiago]

Hey, just wanna start off by saying that I'm not 100% sure if it's a volar or vue issue, but the problem goes away when I disable volar

I'm using SFC and I'm have an issue where the prop typings are not correctly determined, but are assigned as unknown instead. E.g.: I have this component:

<template>
  <a :href="foo">foo</a>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    props: {
      someProp: { type: String, required: true },
    },
    computed: {
      foo() {
        return this.someProp.includes("foo") ? this.someProp : this.someProp;
      },
    },
  });
</script>

which gives me these 2 errors

I'm using:
vue: ^3.2.24
vite: ^2.0.0
typescript: ~4.1.5

Not really sure how the project was generated, but I think it was a mix of vite and vuetify create tools

[johnsoncodehk]

Could you show your tsconfig? You should need "strict": true.

[Ribeiro-Tiago]

Sure thing,

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "types": ["jest", "node"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"],
  "exclude": ["node_modules"]
}

also, interestingly enough this issue only seems to happen on macos (latest version). I'm currently on a machine with ubuntu 20 and typing is correct

[johnsoncodehk]

Update typescript to 4.5.4 should fix it.