Laravel MixでVueを使っているプロジェクトで、既にコンポーネントをJavaScriptで書いてしまったけどTypeScriptに変えたい、という場合があると思いますが、割と最小限ではじめられます。全部のコンポーネントをTypeScriptに書き直さなければならない、ということもありませんし、おすすめです。具体的な手順を書いておきます。
vue-cliやcreate-nuxt-appのテンプレートから取ってくると早いと思います。
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というかエントリーポイントのファイルですが、これだけはTypeScriptに変更しないといけません。そのため変更し、ビルド時にエラーが出るようであればとりあえず変数の宣言にvariable: any
のようにanyを付けまくります。とりあえずビルドできないとしょうがないので型の設定はあとでやることにしてひたすらanyを付けていきます。
とりあえず何か一つ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
before
data() {
return {
val1: false,
val2: 'aaa'
val3: null
}
}
after
val1 = false
val2 = 'aaa'
val3: YourType
methods配下には書かず直接クラスのメソッドにする
get computedId() {
return `ID:${this.id}`
}
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント