TypeScript - Suggestions don't show up for objects with an index signature containing a mapped object (union type)

I'm new to typescript so it could be me but PHPStorm is not giving suggestions or autcomplete for an object with an index signature containing a mapped object (union type). This is within a .vue file (vue 3.2) using the composition API and script setup syntax sugar

I'm using PHPstorm 2021.2.2 and Typescript 4.4.3. I'm posting this under webstorm as its more js/typescript related

.vue file (please notice the "<{ [key in FlashType]: Flash }>") when declaring the flashObjs const

<script setup lang="ts">
import { BellIcon, CakeIcon, ExclamationCircleIcon } from '@heroicons/vue/solid'
import { reactive } from 'vue'
import Flash from "../Types/Flash";
import FlashType from "../Types/FlashType";

const flashObjs = reactive<{ [key in FlashType]: Flash }>({
message: {
icon: CakeIcon,
background: 'bg-blue-500',
display: true
},
success: {
icon: BellIcon,
background: 'bg-green-500',
display: true
},
error: {
icon: ExclamationCircleIcon,
background: 'bg-red-500',
display: true
}
})
</script>

 

Flash.ts

import { RenderFunction } from "vue";

interface Flash {
icon: RenderFunction,
background: string,
display: boolean,
}

export default Flash


FlashType.ts

type FlashType = 'message' | 'success'| 'error';

export default FlashType


Please see the following pics that shows phpstorm not autocompleting any props when then trying to loop through flashObjs var in my vue template. If I do manually type in the prop, phpstorm shows it as an unresolved variable



If I then make a small change to NOT use a mapped index signature and instead use <{ [key: string]: Flash }>, PHPStorm then suggests the correct props of my Flash object.

.vue file with NOT using union index signature

const flashObjs = reactive<{ [key: string]: Flash }>({
message: {
icon: CakeIcon,
background: 'bg-blue-500',
display: true
},
success: {
icon: BellIcon,
background: 'bg-green-500',
display: true
},
error: {
icon: ExclamationCircleIcon,
background: 'bg-red-500',
display: true
}
})

 

Please see the following image that shows that now looping through the flashObjs var, PHPstorm then suggestions the correct props



Am I doing anything wrong, or is this expected behavior? Not sure if this is a bug or not but would appreciate any advice.

Thanks!

2 comments
Comment actions Permalink

It's an IDE issue, submitted to developers as https://youtrack.jetbrains.com/issue/WEB-53028; please vote for it to be notified on any progress

0
Comment actions Permalink

Happy to hear it's not just me. Thanks Elena!

0

Please sign in to leave a comment.