Vuetifyのbreakpointのnameはstringだけじゃない #TypeScript

結論

export type BreakpointName = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

export interface Breakpoint {
  name: BreakpointName
  // 省略
}

問題提起

vuetify.breakpoint.nameにstringを指定するとこんなエラーが出ていた

The types of 'name' are incompatible between these types.
  Type 'BreakpointName' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

stringだけじゃないのか？？

Vuetifyの公式ドキュメントを読むとstringが帰ってくるのかと思った。
https://vuetifyjs.com/ja/customization/breakpoints/

解説

Vuetifyのソースコードを読んでみよう

VueitfyのBreakpointの型

今回はブレークポイントのTypesだけ見れればいいので下記のリンクのファイルを確認

どうやらBreakpoint.nameがBreakpointNameらしい
BreakpointNameはnumber | 'xs' | 'sm' | 'md' | 'lg' | 'xl'が入る事がわかる

packages/vuetify/types/services/breakpoint.d.ts

// Types
export type BreakpointName = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

// Interfaces
export interface Breakpoint {
  height: number
  lg: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  lgOnly: boolean
  md: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  mdOnly: boolean
  name: BreakpointName
  sm: boolean
  smAndDown: boolean
  smAndUp: boolean
  smOnly: boolean
  width: number
  xl: boolean
  xlOnly: boolean
  xs: boolean
  xsOnly: boolean
  mobile: boolean
  mobileBreakpoint: BreakpointName
  thresholds: BreakpointThresholds
  scrollBarWidth: number
}

export interface BreakpointOptions {
  mobileBreakpoint?: BreakpointName
  scrollBarWidth?: number
  thresholds?: Partial<BreakpointThresholds>
}

export interface BreakpointThresholds {
  xs: number
  sm: number
  md: number
  lg: number
}

なぜBreakpointNameにNumberが入るの？

先程のコードの抜粋を見るとnameとmobileBreakpointにBreakpointNameが使われているらしい。

packages/vuetify/types/services/breakpoint.d.ts

export type BreakpointName = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

export interface Breakpoint {
  name: BreakpointName
  mobileBreakpoint: BreakpointName
}

datatableのpropsを例に説明

どうやら下記の様に利用されるらしい。
defaultでは600が入っているが自由に変更できるとのこと。

<v-data-table
  :headers="headers"
  :items="desserts"
  :items-per-page="5"
  class="elevation-1"
  mobile-breakpoint="500"
/>

VuetifyのmobileBreakpointが利用されているソース

また、mobileBreakpointがnumberだけならBreakpointNameで統一せずに分けろよな！！
と思ったがmobileBreakpointmにlgのようstringを使うコードも一応存在するみたい。

breakpoint.nameにnumber入れてるコードあるかな？

ということでVuetifyのbreakpointのテストコードを拝見
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/breakpoint/__tests__/breakpoint.spec.ts

number入れてるテスト無いじゃん！！