Update: [Client] Vuetify 2.x のコンポーネントの型定義を追加

エコシステムの分断が大変つらい…
tsukumijima · Apr 24, 2023 · 1594a9f · 1594a9f
1 parent 6746e7f
commit 1594a9f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 15 deletions.
diff --git a/client/package.json b/client/package.json
@@ -60,6 +60,7 @@
         "vue-template-compiler": "^2.7.14",
         "vuetify-loader": "^1.9.2",
         "vuetify-message-snackbar": "^0.2.7",
+        "vuetify2-component-types": "^2.6.8",
         "yarn-audit-fix": "^9.3.7"
     },
     "browserslist": [

diff --git a/client/src/main.ts b/client/src/main.ts
@@ -2,12 +2,12 @@
 import { Icon } from '@iconify/vue2';
 import { createPinia, PiniaVuePlugin } from 'pinia';
 import { polyfill as SeamlessScrollPolyfill } from 'seamless-scroll-polyfill';
+import VTooltip from 'v-tooltip';
 import Vue from 'vue';
 import VueAxios from 'vue-axios';
 import VueVirtualScroller from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import VuetifyMessageSnackbar from 'vuetify-message-snackbar';
-import VTooltip from 'v-tooltip';
 import 'v-tooltip/dist/v-tooltip.css';
 
 import App from '@/App.vue';

diff --git a/client/src/types.d.ts b/client/src/types.d.ts
@@ -1,13 +1,21 @@
 
-// ブラウザの JavaScript API のうち、開発時点でマイナーすぎて @types が定義されていない API の型を定義
+// Vue コンポーネントの型定義
+// ref: https://azukiazusa.dev/blog/volar-vuetify2-x/
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        RouterLink: typeof import('vue-router')['RouterLink']
+        RouterView: typeof import('vue-router')['RouterView']
+        Icon: typeof import('@iconify/vue2')['Icon']
+    }
+}
+
+// ***** ブラウザの JavaScript API のうち、開発時点でマイナーすぎて @types が定義されていない API の型定義 *****
 
 // Virtual Keyboard API
 // ref: https://www.w3.org/TR/virtual-keyboard/
-
 interface Navigator {
     readonly virtualKeyboard: VirtualKeyboard;
 }
-
 interface VirtualKeyboard {
     show(): undefined;
     hide(): undefined;
@@ -25,24 +33,20 @@ interface VirtualKeyboard {
         options?: boolean | EventListenerOptions
     ): void;
 }
-
 interface VirtualKeyboardGeometryChangeEvent extends Event {
     readonly currentTarget: VirtualKeyboard;
     readonly srcElement: VirtualKeyboard;
     readonly target: VirtualKeyboard;
 }
-
 type VirtualKeyboardGeometryChangeEventListener = ((ev: VirtualKeyboardGeometryChangeEvent) => any) | null;
 
-// TypeScript types for the Picture-in-Picture API
+// Picture-in-Picture API
 // ref: https://gist.github.com/Rendez/6e088e8713f47e87ab04efcc22f365b1
-
 interface PictureInPictureResizeEvent extends Event {
     readonly currentTarget: PictureInPictureWindow;
     readonly srcElement: PictureInPictureWindow;
     readonly target: PictureInPictureWindow;
 }
-
 interface PictureInPictureWindow {
     readonly width: number;
     readonly height: number;
@@ -58,32 +62,26 @@ interface PictureInPictureWindow {
         options?: boolean | EventListenerOptions
     ): void;
 }
-
 interface PictureInPictureEvent extends Event {
     readonly pictureInPictureWindow: PictureInPictureWindow;
 }
-
 type PictureInPictureEventListener = ((this: HTMLVideoElement, ev: PictureInPictureEvent) => any) | null;
-
 interface HTMLVideoElement {
     autoPictureInPicture: boolean;
     disablePictureInPicture: boolean;
     requestPictureInPicture(): Promise<PictureInPictureWindow>;
     onenterpictureinpicture: PictureInPictureEventListener;
     onleavepictureinpicture: PictureInPictureEventListener;
 }
-
 interface Element {
     webkitRequestFullscreen(): Promise<void>;
 }
-
 interface Document {
     readonly pictureInPictureEnabled: boolean;
     webkitFullscreenElement: Element;
     exitPictureInPicture(): Promise<void>;
     webkitExitFullscreen(): Promise<void>;
 }
-
 interface DocumentOrShadowRoot {
     readonly pictureInPictureElement: HTMLVideoElement | null;
     webkitFullscreenElement: Element;

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -34,6 +34,7 @@
             "vuetify",
             "webpack-env",
             "wicg-mediasession",
+            "vuetify2-component-types",
         ],
         "paths": {
             "@/*": [
@@ -49,7 +50,24 @@
     },
     "vueCompilerOptions": {
         // for Volar
+        // ref: https://github.com/IntelliTect/vuetify2-component-types
         "target": 2.7,
+        "experimentalModelPropName": {
+            "input-value": {
+                "v-checkbox": true,
+                "v-switch": true,
+                "v-chip": true,
+                "v-btn": true,
+                "v-list-item": true,
+                "v-bottom-navigation": true,
+            },
+            "": {"input": true},
+            "value": {
+                "input": {"type": "text"},
+                "textarea": true,
+                "select": true,
+            }
+        }
     },
     "include": [
         "src/**/*.ts",

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -7842,6 +7842,11 @@ vuetify-message-snackbar@^0.2.7:
   resolved "https://registry.yarnpkg.com/vuetify-message-snackbar/-/vuetify-message-snackbar-0.2.7.tgz#82d89add0830627a13982dd736ccaef05a3b59ab"
   integrity sha512-RwBbSIx1/7fN/ZTXj1IspQeVWSJHuWI3p7KU29/CgW3Z8TFUPEITz+2zu+Fp5TWInKSPCXG3eMivkjNCa5BLqQ==
 
+vuetify2-component-types@^2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/vuetify2-component-types/-/vuetify2-component-types-2.6.8.tgz#9cae3bd31dfcad9bb47770b855bb90328cb2ebfd"
+  integrity sha512-8e+rAw74tZ+6oRG8X9FQOFUQBKe7ds5p6HNmE84DqNp2xbXRM5o9o9ODbrNx2b8XB5sTStMOQ7B+DQIgdfMjkw==
+
 vuetify@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.12.tgz#ef1871c720834d53e00fef142b9841a3e8c1a4f9"