vuetify2でoptionを指定する(typescript)

環境

node: 12.6.0
typescript: 3.5.2
vue: 3.8.4
tslint: 5.17.0
vuetify: 2.0.2

問題

vuetifyを2系にアップグレードした後、下記のような形でvuetifyのオプションを指定するとエラーを吐かれた。

src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

const options = {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#ee44aa',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        link: '#2196F3',
        appbar: '#212121',
      },
    },
  },
  customProperties: true,
  icons: {
    iconfont: 'fa',
  },
};

Vue.use(Vuetify);

// optionsを受け取るところでエラー
export default new Vuetify(options);

エラー内容

Argument of type '{ theme: { dark: boolean; themes: { dark: { primary: string; secondary: string; accent: string; error: string; info: string; succes
s: string; warning: string; link: string; appbar: string; }; }; }; customProperties: boolean; icons: { ...; }; }' is not assignable to parameter of type 'P
artial<VuetifyPreset>'.
  Types of property 'icons' are incompatible.
    Type '{ iconfont: string; }' is not assignable to type 'VuetifyIconOptions'.
      Types of property 'iconfont' are incompatible.
        Type 'string' is not assignable to type '"md" | "mdi" | "mdiSvg" | "fa" | "fa4"'.

解決方法

VuetifyPreset をimportして、optionの型を指定してあげる。

vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import { VuetifyPreset } from 'vuetify/types/presets';

const options: VuetifyPreset = {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#ee44aa',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        link: '#2196F3',
        appbar: '#212121',
      },
    },
  },
  customProperties: true,
  icons: {
    iconfont: 'fa',
  },
};

Vue.use(Vuetify);

export default new Vuetify(options);

解決方法2

iconfontは string ではなく 'fa' 型で指定しろと言われているので、
'fa' as 'fa' と書いてあげる。

エラーは消えるが、これが良い方法なのかはわからない。

src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

const options = {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#ee44aa',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        link: '#2196F3',
        appbar: '#212121',
      },
    },
  },
  customProperties: true,
  icons: {
    iconfont: 'fa' as 'fa',
  },
};

Vue.use(Vuetify);

export default new Vuetify(options);

補足

vuetify2を使って新規にvuetify.tsを作成すると、 customProperties の指定方法が若干異なっていたので、そっちに合わせた書き方も記載しておく。
（自動生成される方に合わせておいた方が良いことがあるのかもしれない…？）
（そして、options in options になってしまっていて少し気持ち悪い <- 命名さぼりました）

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import { VuetifyPreset } from 'vuetify/types/presets';

const options: VuetifyPreset = {
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: {
        primary: '#ee44aa',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      },
    },
  },
  icons: {
    iconfont: 'fa',
  },
};

Vue.use(Vuetify);

export default new Vuetify(options);