-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
expose and ts types #6643
Comments
use render by <script lang="ts">
import { defineComponent, h } from "vue";
export default defineComponent({
name: "HelloWorld",
setup() {
const msg = () => {
console.log("msg");
};
return { msg };
},
render() {
return h("div", "hello");
},
});
</script> render by jsx . add <script lang="tsx">
import { defineComponent } from "vue";
export default defineComponent({
name: "HelloWorld",
setup() {
const msg = () => {
console.log("msg");
};
return { msg };
},
render() {
return <div>HelloWorld</div>;
},
});
</script> |
or you can create a type to describe Comp instance instead of depend on type CompInst = {
msg: () => void;
} in component // Comp.vue
<script lang="tsx">
import { defineComponent } from "vue";
import { CompInst } from "./type.ts";
export default defineComponent({
name: "Comp",
setup() {
const exposeObj: CompInst = {
// type hint !
msg: () => console.log("msg");
}
return {
...exposeObj
};
},
render() {
return <div>HelloWorld</div>;
},
});
</script> use <script setup lang="ts">
import { onMounted, ref } from 'vue';
import Comp from './Comp.vue';
import { CompInst } from "./type.ts";
const compRef = ref<CompInst | null>(null);
onMounted(() => {
// type hint ! and doesn't have any properties that you don't want to expose.
compRef.value?.msg();
});
</script>
<template>
<div>
<Comp ref="compRef" />
</div>
</template> |
thanks. |
why not this <script lang="ts">
import { defineComponent, h } from "vue";
export default defineComponent({
name: "HelloWorld",
setup(_props, { expose }) {
const msg = () => {
console.log("msg");
};
expose({ msg })
return () => (
h("div", "hello");
)
});
</script> don't need |
Yes, I also think so, if |
I used tsx files got the same problem. // Demo.tsx
import { defineComponent} from "vue";
export default defineComponent({
name: "HelloWorld",
setup(_props, { expose }) {
const msg = () => {
console.log("msg");
};
expose({ msg })
return () => (<div>xxx</div>)
}); // app.tsx
import { defineComponent, onMounted } from 'vue'
import Demo from './Demo'
export default defineComponent({
setup (props) {
const el = ref<InstanceType<typeof Demo>>()
onMounted(() => {
console.log(el.value)
el.value?.msg // Uncaught TypeError: t.value.msg is undefined
})
return () => <Demo ref={el}></Demo>
}
}) Is this the wrong type of vue3? |
same problem |
Try vue-macros' |
same problem + 1,and use |
This is really problematic, just lost 2 hours trying to do something really easy, but using #4397 was closed and had no solution. |
This is not considered a bug, because there is no way in TypeScript for the With the latest version of vue-tsc, this is working correctly when using // use this in other components
export interface Exposed {}
defineComponent({
setup(_, { expose }) {
expose({ /* ... */ } satisfies Exposed)
}
}) |
Vue version
^3.2.39
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-kmnqvn?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue&terminal=dev
Steps to reproduce
请使用 VSCode 打开
What is expected?
setup
函数必须return
expose
的方法才能使 ts 的类型检测通过render
或者tsx
的方式,无法显视的return
, ts 类型检查就找不到expose
的属性What is actually happening?
expose() 和 renturn {}
System Info
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: