DEV Community

dala00
dala00

Posted on • Originally published at crieit.net

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')
Enter fullscreen mode Exit fullscreen mode

これをtsに変えます。

mix.ts('resources/assets/js/app.ts', 'public/js')
Enter fullscreen mode Exit fullscreen mode

まるごと全て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 {
Enter fullscreen mode Exit fullscreen mode

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

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

@Component({
  components: { SubComponent }
})
Enter fullscreen mode Exit fullscreen mode

プロパティもデコレータ

@Prop({
  type: String
  required: true
})
name: string
Enter fullscreen mode Exit fullscreen mode

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

before

data() {
  return {
    val1: false,
    val2: 'aaa'
    val3: null
  }
}
Enter fullscreen mode Exit fullscreen mode

after

val1 = false
val2 = 'aaa'
val3: YourType
Enter fullscreen mode Exit fullscreen mode

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

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

computedはgetterに

get computedId() {
  return `ID:${this.id}`
}
Enter fullscreen mode Exit fullscreen mode

その他

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

Top comments (0)