allow exporting types using `keyof typeof`

[theoephraim]

In the past I have found it very useful to be able to export types using keyof typeof someObject. It had been working previously, but volar has just started complaining:

While in theory exporting types only at the top of the file makes sense, it means that you cannot create a type based on a const. Also, doing so works fine in a regular *.ts file.

Why would I want to do this? It allows you to have some arbitrarily complex configuration associated with some set of string keys, and then create a type that is only valid when using one of those keys, without having to define the list of possible values more than once.

For example, I can use it to create a list of possible icon names, with a mapping to specific Icons.

import CheckIcon from '@/images/icons/CheckIcon.svg';
import CheckCircleIcon from '@/images/icons/CheckCircle.svg';
// ...

const POSSIBLE_ICONS = {
  check: CheckIcon,
 'check-circle': CheckCircleIcon,
  // ...
};

export type IconNames = keyof typeof POSSIBLE_ICONS;

there are many other cases where this can be useful as well...

Note - may be somewhat related to #923 which is just complaining about exporting additional types altogether.

[theoephraim]

More digging and I've found that moving these extra exports to an additional <script> block alongside the <script setup> block seems to do the trick.

I think this may be the intended behaviour, but the vue docs are a bit lacking in specifics about TS, and the fact that it used to work but changed suddenly created the extra confusion.

[theoephraim]

One potential remaining issue is what to do if we need access to the const object in the template

<script lang="ts">
  // I need to define config here in order to export the type
  const CONFIG = {
    a: 'a',
    b: 'b',
  };

  export type ConfigKeys = keyof typeof CONFIG;
</script>

<script lang="ts" setup>
  // we do have access to CONFIG and ConfigKeys here!
  // how can I re-export CONFIG back to the template? other than some hacky renaming?
</script>

<template>
  <!-- We do not have access to CONFIG here :( -->
</template>

[theoephraim]

Closing this.
See related #940

Will open above question in vue/core

[johnsoncodehk]

One potential remaining issue is what to do if we need access to the const object in the template

<script lang="ts">
  // I need to define config here in order to export the type
  const CONFIG = {
    a: 'a',
    b: 'b',
  };

  export type ConfigKeys = keyof typeof CONFIG;
</script>

<script lang="ts" setup>
  // we do have access to CONFIG and ConfigKeys here!
  // how can I re-export CONFIG back to the template? other than some hacky renaming?
</script>

<template>
  <!-- We do not have access to CONFIG here :( -->
</template>

This is actually working for me, but I know that is not working in previous vue version. Have you tried update to latest vue version?

[jaulz]

@johnsoncodehk regarding your question, I just tried with v0.33.10 and with v0.33.13 and this does not work:

<script lang="ts">
import { defineComponent } from 'vue'

export type CustomType = {}

export default defineComponent({ ... })
</script>

<template>
  <!-- type CustomType = /*unresolved*/ any -->
  <!-- Cannot find name 'CustomType'.ts(2304) -->
</template>