Vue defineProps<> can't use imported Interface
hona-app opened this issue · comments
Vue version
3.4.21
Link to minimal reproduction
Steps to reproduce
<script setup lang="ts">
import {ref, toRefs} from "vue";
import {PagingHeaderProps} from "hona-pc";
let props = defineProps<PagingHeaderProps>() //Cause the error
</script>
What is expected?
App runs normaly
What is actually happening?
[plugin:vite:vue] Missing semicolon. (8778:3)
??/src/components/partials/ctl_table/PagingHeader.vue:8778:3
at constructor (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:353:19)
at TypeScriptParserMixin.raise (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:3277:19)
at TypeScriptParserMixin.semicolon (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:3598:10)
at TypeScriptParserMixin.parseExpressionStatement (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:12755:10)
at TypeScriptParserMixin.parseExpressionStatement (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:9216:26)
at TypeScriptParserMixin.parseStatementContent (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:12366:19)
at TypeScriptParserMixin.parseStatementContent (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:9132:18)
at TypeScriptParserMixin.parseStatementLike (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:12229:17)
at TypeScriptParserMixin.parseModuleItem (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:12206:17)
at TypeScriptParserMixin.parseBlockOrModuleBlockBody (??\node_modules.pnpm@babel+parser@7.23.9\node_modules@babel\parser\lib\index.js:12786:36
System Info
Win11 x64
Any additional comments?
No response
Please provide an actually runnable reproduction. I can't see the error from the provided link.
Please provide an actually runnable reproduction. I can't see the error from the provided link.
This problem must import any third Package which contains interface declaration, thus I can't supply a runable demo. Please Copy code to local to reproduction this.
https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations
The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.
In my project, I have many sub components(50+) which have the same props option, so I wan't to reuse entire props object, so I can reduce 98% coding of props object declaration, It's really useful in dynamic imported components seceneries.
SO: Will vue support this secenary, and when? Looking forward to it.