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