概要
JavaScriptで書かれたコードをTypeScriptに移行したので、そのときに書き換えた部分をメモします。
変わったこと
setupの書き方
JavaScript
ファイルを新規作成するたびにこれを書くのが大変でした。エディタが自動で書いてくれることもありますが、どちらにせよインデントが増えるので面倒です。
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
setup() {
// 処理
},
});
</script>
TypeScript
書き方が非常にシンプルになりました。スッキリしてますね。
<script setup lang="ts">
// 処理
</script>
propsの書き方
見やすくはあるのですが、一つのプロパティに4・5行使うのは少し鬱陶しいですね。
JavaScript
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
props: {
message: {
type: String,
required: true,
default: 'Hello World',
},
count : {
type: Number,
required: false,
default: 1,
},
names: {
type: Array,
required: false,
},
},
setup() {
// 処理
},
});
</script>
TypeScript
一つのプロパティが1行で済むので助かります。ただ、初期値を設定する場合はJavaScriptより少し面倒かもしれません。
<script setup lang="ts">
// 初期値を設定しない場合
const props = defineProps<{
message: string;
count?: number;
names?: string[];
}>();
</script>
<script setup lang="ts">
// 初期値を設定する場合
export interface Props {
message: string;
count?: number;
names?: string[];
}
const props = withDefaults(defineProps<Props>(), {
message: 'Hello World',
count: 1,
names: () => [],
});
</script>
[追記]
ESLintを利用している場合、上のコードだと'props' is assigned a value but never usedというエラーが出てしまいます。scriptタグ内でpropsを利用せずtemplateタグのみで利用する場合は、const propsを省略して次のような書き方で大丈夫です。
<script setup lang="ts">
defineProps<{
message: string;
count?: number;
names?: string[];
}>();
</script>
変数・関数の扱い
JavaScript
毎回returnに値を書いていくのが面倒ですね。
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
setup() {
const message = ref('');
function changeMessage(newMessage) {
message.value = newMessage;
}
return {
message,
changeMessage,
}
},
});
</script>
TypeScript
returnが必要なくなりスッキリしました。また、関数の引数や戻り値、refなどで型指定できるのも良いですね。
<script setup lang="ts">
const message = ref<string>('');
function changeMessage(newMessage: string) {
message.value = newMessage;
}
</script>
emitの扱い
JavaScript
setup()の引数にemitが入るのが少し気持ち悪いですね。
子コンポーネント
ChildComponent.vue
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
setup(props, { emit }) {
function showMessage() {
emit('showMessage', 'HelloWorld');
}
return {
showMessage,
};
},
});
</script>
<template>
<button @click="showMessage">
ボタン
</button>
</template>
親コンポーネント
ParentComponent.vue
<script>
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
setup(props) {
const message = ref('');
function showMessage(newMessage) {
message.value = newMessage;
}
return {
message,
showMessage,
};
},
});
</script>
<template>
<p>{{ message }}</p>
<child-component @showMessage="showMessage" />
</template>
TypeScript
emitsを独立して宣言できるようになりました。
子コンポーネント
ChildComponent.vue
<script setup lang="ts">
const emits = defineEmits<{
(e: 'showMessage', message: string): void;
}>();
function showMessage() {
emits('showMessage', 'HelloWorld');
}
</script>
<template>
<button @click="showMessage">
ボタン
</button>
</template>
親コンポーネント
ParentComponent.vue
<script setup lang="ts">
const message = ref<string>('');
function showMessage(newMessage: string) {
message.value = newMessage;
}
</script>
<template>
<p>{{ message }}</p>
<child-component @showMessage="showMessage" />
</template>
eventの扱い
JavaScript
<script>
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
// 省略
setup(props) {
function updateValue(event) {
emits('update:modelValue', event.target.value);
}
// 省略
},
});
</script>
TypeScript
これに関してはTypeScript側が面倒ですね。型指定の弊害として受け入れるしかないのですが…。
<script setup lang="ts">
// 省略
function updateValue(event: Event): void {
if (event.target instanceof HTMLInputElement) {
emits('update:modelValue', event.target.value);
}
}
</script>
終わりに
結論としては、一部面倒になったところもありますが全体としてはTypeScriptの方がスッキリ書け、型も安全になりました。他にもあったら追記していきます。