Laravel Mixにて途中でJavaScriptをTypeScriptに変える

Laravel MixでVueを使っているプロジェクトで、既にコンポーネントをJavaScriptで書いてしまったけどTypeScriptに変えたい、という場合があると思いますが、割と最小限ではじめられます。全部のコンポーネントをTypeScriptに書き直さなければならない、ということもありませんし、おすすめです。具体的な手順を書いておきます。

必要なファイルを追加

vue-cliやcreate-nuxt-appのテンプレートから取ってくると早いと思います。

• tsconfig.json
• resources/assets/js/index.d.ts

mix.jsをmix.tsに変える

webpack.mix.jsで下記のような設定があると思います。

mix.js('resources/assets/js/app.js', 'public/js')

これをtsに変えます。

mix.ts('resources/assets/js/app.ts', 'public/js')

まるごと全てTypeScriptに置き換える開設の場合はフォルダ名もtsに変更する様な記述があったりしますが、今回は最小限ですのでメソッド名とapp.jsのファイル名だけの変更になります。

app.jsをapp.tsにする

app.jsというかエントリーポイントのファイルですが、これだけはTypeScriptに変更しないといけません。そのため変更し、ビルド時にエラーが出るようであればとりあえず変数の宣言にvariable: anyのようにanyを付けまくります。とりあえずビルドできないとしょうがないので型の設定はあとでやることにしてひたすらanyを付けていきます。

コンポーネントをTypeScript化する

とりあえず何か一つTypeScriptに変更してみましょう。これは他で色々解説があるので詳しくはそのあたりを見ていただければ良いと思いますが、一応ざっと何をするかを書いておきます。

クラスにする

これがだいたい基本形です。

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponentName extends Vue {

いくつかの設定はデコレータ側へ

使うコンポーネントの設定などはデコレータ側で設定します。

@Component({
  components: { SubComponent }
})

プロパティもデコレータ

@Prop({
  type: String
  required: true
})
name: string

dataは使わず全部クラスのプロパティにする

before

data() {
  return {
    val1: false,
    val2: 'aaa'
    val3: null
  }
}

after

val1 = false
val2 = 'aaa'
val3: YourType

メソッドは普通のメソッドに

methods配下には書かず直接クラスのメソッドにする

computedはgetterに

get computedId() {
  return `ID:${this.id}`
}

その他

• ts-loaderがエラーになったらバージョンをあわせてインストール
• 型が入っていない外部モジュール等は@typesに型があればインストール
• 型がない外部モジュールはindex.d.tsにdeclareを追加（VSCodeなどであれば対処方法が表示されていると思います）