カテゴリー: FrontEnd

Vue.jsのコードをTypeScriptで書く

1 はじめに
2 TypeScriptでの書き方
3 さいごに
4 おすすめ書籍

はじめに

Vue CLI 3からプロジェクト生成時にTypeScriptを選べるようになり、Vue.jsを手軽にTypeScriptで書くことができるようになりました。それにより、TypeScriptのクラス構文を使って記述することができるようになるため、コードをよりシンプルに書くことができるようになります。

TypeScriptのクラス構文を使った書き方は従来の書き方とはだいぶ異なります。そこで、 data や methods などのよく使う項目をTypeScriptのクラス構文で記述する方法を紹介します。TypeScriptを使うプロジェクトの作成方法についてはこちらの記事を御覧ください。

TypeScriptでの書き方

それでは、TypeScriptのクラス構文での書き方を見ていきましょう。

定義

まずはじめに定義に仕方を見ていきましょう。JavaScriptでは以下のように記述します。

<script>
export default {}
</script>

TypeScriptでは以下のようになります。

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

export default class Home extends Vue {}
</script>

vue-property-decorator はVueをTypeScriptの構文で書くためのツールです。

data

data はJavaScriptでは以下のように記述します。

<script>
export default {
  data() {
    return {
      hoge: "fuga",
      foo: "bar",
    };
  },
}
</script>

TypeScriptではクラスのプロパティとして定義します。

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

export default class Home extends Vue {
  hoge: string = "fuga"
  foo: string = "bar"
}
</script>

methods

methods はJavaScriptでは以下のように記述します。

<script>
export default {
  methods: {
    hoge() {
      return "fuga";
    },
    foo(bar) {
      retrun bar;
    },
  },
}
</script>

TypeScriptではクラスのメソッドとして定義します。

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

export default class Home extends Vue {
  hoge() {
    return "fuga"
  }
  foo(bar) {
    return bar;
  }
}
</script>

computed

computed はJavaScriptでは以下のように記述します。

<script>
export default {
  data() {
    return {
      firstname: "Taro",
      lastname: "Yamada".
    };
  },
  computed: {
    fullname: {
      get: function() {
        return this.firstname + this.lastname;
      },
      set: function(name) {
        var names = name.split(" ");
        this.firstname = names[0];
        this.lastname = names[1];
      },
    },
  }
}
</script>

TypeScriptではアクセサーとして定義します。

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

export default class Home extends Vue {
  firstname: string = "Taro"
  lastname: string = "Yamada"

  get fullname() {
    return this.firstname + this.lastname
  }
  set fullname(name) {
    const names = name.split(" ")
    this.firstname = names[0]
    this.lastname = names[1]
  }
}
</script>

props

props はJavaScriptでは以下のように記述します。

<script>
export default {
  props: {
    foo: {
      type: String,
      required: true,
    },
    bar: {
      type: Number,
      default: 0
    },
  },
}
</script>

TypeScriptでは @Prop を使って記述します。

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

export default class Home extends Vue {
  @Prop({ required: true }) private foo!: string
  @Prop() bar: number = 0
}
</script>

emit

emit はJavaScriptでは以下のように記述します。

<script>
export default {
  methods: {
    foo() {
      this.$emit("event", "bar")
    },
  },
}
</script>

TypeScriptでは @Emit を使って記述します。

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

export default class Home extends Vue {
  @Emit("event") fooEvent(val: string): void {}

  foo() {
    this.fooEvent("bar")
  }
}
</script>

lifecycle hooks

created などの lifecycle hooks はJavaScriptでは以下のように記述します。

<script>
export default {
  data() {
    return {
      foo: null,
    };
  },
  created() {
    this.foo = "bar";
  },
}
</script>

TypeScriptでも同様に記述します。

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

export default class Home extends Vue {
  foo: string | null = null;

  created() {
    this.foo = "bar"
  }
}
</script>

components

compoents はJavaScriptでは以下のように記述します。

<script>
import Hoge from "@/components/Hoge";

export default {
  components: {
    Hoge
  },
}
</script>

TypeScriptでは @Compoent を使って記述します。

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

import Hoge from "@/components/Hoge"

@Component({
  components: {
    Hoge
  }
})
export default class Home extends Vue {
}
</script>

filters

filters はJavaScriptでは以下のように記述します。

<script>
export default {
  filters: {
    foo(val) {
      return val + "bar";
    },
  },
}
</script>

TypeScriptでは @Compoent を使って記述します。

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

@Component({
  filters: {
    foo(val: string): string {
      return val + "bar"
    }
  }
})
export default class Home extends Vue {}
</script>