v-data-table（Vuetify）をTypescriptで書き直す

Vuetify.ts

VuetifyはTypescript対応がされていますが、
公式ドキュメントのコンポーネントリストでTypescriptのサンプルコードがないため、
v-data-tableを例にTypescriptに変更した際の備忘録です。

公式ドキュメント
https://vuetifyjs.com/en/components/data-tables/

Javascript

sample.vue

//表示部分
<template>
  <v-container>
    <v-row>
      <v-data-table
        :headers="headers1"
        :items="items1"
        :items-per-page="5"
        class="elevation-1"
      ></v-data-table>
    <v-row>
      <v-col cols=3></v-col>
    </v-row>
      <v-data-table
        :headers="headers2"
        :items="items2"
        :items-per-page="5"
        class="elevation-1"
      ></v-data-table>
    </v-row>
  </v-container>
</template>

//スクリプト
<script>
  export default class hoge {
    export default {
      data() {
        return {
          headers1: [...],
          headers2: [...],
          items1: [...],
          items2: [...],
        }
      }
    }
  }
</script>

それぞれの詳細が知りたい場合は、
公式ドキュメントからGitHubに公開されているコードを確認してください。

また、公式ドキュメントのAPIリファレンスを見ると、
headers 部分についてはjavascript でも、
下記のようになることを期待されています。

header_example.js

{
  text: string
  value: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  filterable?: boolean
  groupable?: boolean
  divider?: boolean
  class?: string | string[]
  width?: string | number
  filter?: (value: any, search: string, item: any) => boolean
  sort?: (a: any, b: any) => number
}

したがって、こちらをTypescriptに書き直す必要があります（嘘）。

Typescriptに書き直す

主に"#スクリプト"以下について、
headers と、 items という、
interfaceやtypeを構造体のような役割のあるモジュールで定義してあげる必要があります。

ただ、
headerについては自分で定義してもよいのですが、
VuetifyでTypescript用にDataTableHeadeインターフェースが用意されているので、こちらを利用したほうが楽です。

index.d.ts

export interface DataTableHeader<T extends any = any> {
  text: string
  value: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  filterable?: boolean
  groupable?: boolean
  divider?: boolean
  class?: string | string[]
  width?: string | number
  filter?: (value: any, search: string | null, item: any) => boolean
  sort?: DataTableCompareFunction<T>
}

この辺を踏まえて書き直すと下記のようになります。

sample.vue

//表示部分
<template>
  <v-container>
    <v-row>
      <v-data-table
        :headers="headers1"
        :items="items1"
        :items-per-page="5"
        class="elevation-1"
      ></v-data-table>
    <v-row>
      <v-col cols=3></v-col>
    </v-row>
      <v-data-table
        :headers="headers2"
        :items="items2"
        :items-per-page="5"
        class="elevation-1"
      ></v-data-table>
    </v-row>
  </v-container>
</template>

<script lang="ts">
  export default class hoge {
    //ヘッダー部
    headers1: DataTableHeader[]=[...,...,]
    headers2: DataTableHeader[]=[...,...,]
    
    //アイテム部
    items1: item[]=[...,...,]
    items2: item[]=[...,...,]
  }
  
  //アイテムインターフェース作成部
  export interface item<T extends any = any>{
    xx :string;
    yy :string;
    zz? :string;
    …
  }
</script>

以上です。