前回構想していた通り、 TypeScript を導入した。

導入

公式(セットアップ | Nuxt TypeScript)の通りやるだけ。

お型付け

Repository

そもそもの目的だった、2種類の Repository (前回参照)でインターフェースを揃えるのは TypeScript の interface を使うことで満たした。

// repositories/interfaces/IPostRepository.ts
export interface IPostRepository {
  // 略
}

export class PostRepository implements IPostRepository {
  // 略
}

// plugins/IRepositories.ts (ファイルの場所これで良いのか？)
import { IPostRepository } from '../repositories/interfaces/IPostRepository'

export interface IRepositories {
  posts: IPostRepository
}

// plugins/repositories.ts
// plugins/mock_repositories.ts も同様に (import 元だけ変える)
import { PostRepository } from '../repositories/PostRepository'
export default ({ $axios }, inject) => {
  const posts = new PostRepository($axios)
  const repositories: IRepositories = { posts }
  inject('repositories', repositories)
}

vue-shim.d.ts を用意して *.vue ファイル内で this.$repositories の型を推論できるように

import { IRepositories } from 'plugins/IRepositories'

declare module 'vue/types/vue' {
  interface Vue {
    readonly $repositories: IRepositories
  }
}

余談

Vue.extend の中で this の型が any に推論されるのなんでや…で2時間溶かした😇
("noImplicitThis": false 外したら適切に推論された)

— のむねる (@nomnel) October 31, 2020

*.vueファイル

Repository を利用している箇所を中心に、全体的に型の宣言を足した。量が多いがそこは根気…

手間だが、特殊ケースで null チェックが漏れてた箇所も発見出来たし、今後のことも考えるとやってよかった。

今後

ここまで来るといっそのこと全てお型付けしたくなるが、 現状だと template では型検査してくれないみたい。のでいっそのこと JSX を導入して render メソッドを使うようにしようか検討中。