Vue + TypeScript + CSS module

Question

I have got SFC (single file vue component), that use TypeScript, render function and CSS module

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    mode: {
      type: String,
      default: 'td', // or th
    },
  },
  render(h) {
    return h('tr', [
      'preview',
      'name',
      'price',
      'count',
      'delete',
    ].map(col => h(this.mode, { class: this.$style[col] },
      this.$slots[col])));
  },
});
</script>

<style lang="stylus" module>
.preview
  display none

.delete
  text-align center

@media (min-width 768px)
  .preview
    display table-row
</style>

And I getting error from TypeScript:

ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ mode: string; }>>
'.
    16 |       'count',
    17 |       'delete',
  > 18 |     ].map(col => h(this.mode, { class: this.$style[col] }, this.$slots[col])));
       |                                             ^
    19 |   },
    20 | });

In JS this code working but TS don`t knows about CSS modules and this.$style property. How to fix it?

Answer 1

You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
   $style: any
  }
}

Change any to match the type declaration of $style, for example:

$style: { [key: string]: string }