It seems like I've encountered a bit of a challenge... Perhaps a bug in Vue3 with Typescript and the composition API, or maybe I'm missing something.
I'm facing an issue where I'm not getting any intellisense in my IDE (Webstorm) when I have an object that is typed as optional:
Here's a small example I've set up: In this scenario, you would expect to see "commentAuthor" suggested when accessing .comment, but unfortunately, I'm not getting this suggestion. However, if I specify in my interface that comment should not be optional, then I do get the correct intellisense. You can see what I mean in the image attached below
<template>
<h2>This is a Vue 3 component!</h2>
{{ test.post.comment.commentAuthor }}
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
interface Comment {
id: string;
commentAuthor: string;
topFriend?: {
uid: string;
name: string;
};
}
interface Post {
id: string;
postContent: string;
comment?: Comment;
}
export interface TestInterface {
id: string;
name: string;
post: Post;
}
export default defineComponent({
setup() {
const test = reactive({
id: "123",
name: "John doe",
post: {
id: "333",
postContent: "Lorem ipsum",
comment: {
id: "444",
commentAuthor: "Jane Doe",
topFriend: {
uid: "555",
name: "Donald Duck",
},
},
},
}) as TestInterface;
return {
test,
};
},
});
</script>
With optional prop in my interface With optional prop in my interface:
Without optional prop Without optional prop
Why is this happening? I believe it's common to have optional objects, so Vue should ideally handle this situation