vue.js - 想问一下vue3和typescript一起使用的问题？

Question

为什么同样是对Props的类型声明，当组件缺少应有的props的时候，vue不会提示，但react会呢？请问是我哪里设置有误还是本身就是这样？

Vue

父组件：

<template>
  <div>
    子组件：
    <!-- (property) SonComp: any -->
    <SonComp></SonComp>
  </div>
</template>

<script setup lang="ts">
import SonComp from '@/components/SonComp.vue'
</script>

<style scoped></style>

子组件：

<template>
  <div>
    {{ props.msg }}
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ msg: string }>()
/* 或者
const props = defineProps({
  msg: {
    type: String,
    required: true
  }
})
*/
</script>

<style scoped></style>

React

function SonComp(props: { msg: string }) {
  return <>{props.msg}</>;
}

function App() {
  return (
    <div>
      子组件：
      {/* 类型 "{}" 中缺少属性 "msg"，但类型 "{ msg: string; }" 中需要该属性。ts(2741) */}
      {/* function SonComp(props: {msg: string;}): JSX.Element */}
      <SonComp></SonComp>
    </div>
  );
}

export default App;

---

问题已解决。见 https://github.com/vuejs/core/issues/8524
vue3.3.4，切换vscode的volar插件为预发布版本（1.7.13）即可

Answer 1

问题已解决。见 https://github.com/vuejs/core/issues/8524
vue3.3.4，切换vscode的volar插件为预发布版本（1.7.13）即可

Answer 2

你这个vue没有用到ts的类型声明呀，你用的是vue自带的类型校验，只会在控制台报错的，ts应该这么用

<script setup lang="ts">
const props = defineProps<{ msg: string }>()
</script>