2018-12-30に更新

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などであれば対処方法が表示されていると思います)

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント