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>

export default {}

</script>

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

 <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue {} </script>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

import { Component, Vue } from "vue-property-decorator"

@Component({

filters: {

foo(val: string): string {

return val + "bar"

}

})

export default class Home extends Vue {}

</script>

さいごに

TypeScriptでVue.jsのコードを記述する方法を紹介しました。新しくプロジェクトを作る場合はぜひTypeScriptのクラス構文で書いてみてください。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

はじめに

TypeScriptでの書き方

定義

data

methods

computed

props

emit

lifecycle hooks

components

filters

さいごに

おすすめ書籍

フォロー

アプリ情報