Vue.js(Typescript)でPropsに型定義する方法

Vue.jsをTypescriptで書く場合、オブジェクトをネストするような形をとることで、Propsに型定義することができます。
型定義以外にも必須項目やデフォルト値を設定することもできます。
PropTypeを忘れないよう気をつけてください

vue.js

<script>
import Vue, { PropType } from 'vue'

export type DataType = {};
export default Vue.extend({
    name: "Sample",
    components: { RoundRectButton },
    data(): DataType {
        return {};
    },
    props: {
        target: {
            type: String as PropType<string>,,
            required: true,
            default: "ターゲット",
        },
        message: {
            type: String as PropType<string>,,
            required: true,
            default: "メッセージ",
        },
        btnText: {
            type: String as PropType<string>,,
            required: true,
            default: "ボタン",
        },
        btnColor: {
            type: String,
            required: true,
            default: "btn-main",
        },
    },
});
</script>