使途別予算額でレベルごとの税金名称リストを追加

components/DailyBread.vue

@@ -143,8 +143,10 @@
 <script lang="ts">
 import Vue from 'vue'
 import DanceBallroom from 'vue-material-design-icons/DanceBallroom.vue'
+import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import IncomeSelector from '~/components/molecules/IncomeSelector.vue'
 import HouseTypeSelection from '@/components/molecules/HouseTypeSelection.vue'
+import { DailyBreadItem } from '~/plugins/dataTransferObjects/dailyBreadData'
 
 export type DataType = {
   /**
@@ -163,8 +165,20 @@ export type DataType = {
    * スライダーで選択した値
    */
   sliderValue: Number
+  /**
+   * 自治体名
+   */
+  region: string
+}
+
+type PropType = {}
+
+type ComputedType = {
+  taxData: DailyBreadItem[]
 }
 
+type MethodType = {}
+
 export default Vue.extend({
   components: {
     DanceBallroom,
@@ -215,7 +229,7 @@ export default Vue.extend({
       },
     },
   },
-})
+} as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)
 </script>
 
 <style scoped lang="scss">

components/atoms/slider.vue

@@ -12,6 +12,22 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+
+type PropType = {
+  min: Number
+  max: Number
+  step: Number
+  value: Number
+}
+
+type ComputedType = {
+  inputedValue: Number
+}
+
+type MethodType = {}
+type DataType = {}
+
 export default Vue.extend({
   props: {
     /**
@@ -56,7 +72,7 @@ export default Vue.extend({
       },
     },
   },
-})
+} as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)
 </script>
 
 <style scoped lang='scss'>

components/molecules/IncomeSelector.vue

@@ -59,15 +59,25 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import Slider from '@/components/atoms/slider.vue'
 
 type DataType = {
   region: string
-  sliderValue: number
-  timeout: NodeJS.Timeout
-  debouncedInput: string
+  sliderValue: Number
+  timeout: NodeJS.Timeout | null
 }
 
+type PropType = {
+  minYearlyIncome: Number
+  maxYearlyIncome: Number
+  value: number
+}
+
+type ComputedType = {}
+
+type MethodType = {}
+
 export default Vue.extend({
   components: {
     Slider,
@@ -90,14 +100,23 @@ export default Vue.extend({
     },
   },
   props: {
+    /**
+     * 年収最小値
+     */
     minYearlyIncome: {
       type: Number,
       default: 1000000,
     },
+    /**
+     * 年収最大値
+     */
     maxYearlyIncome: {
       type: Number,
       default: 20000000,
     },
+    /**
+     * 年収初期値
+     */
     value: {
       type: Number,
       default: 0,
@@ -108,7 +127,6 @@ export default Vue.extend({
       region: this.$accessor.regionCofogData.regionCofogData.governmentName,
       sliderValue: this.value,
       timeout: null,
-      debouncedInput: '',
     }
   },
   computed: {
@@ -128,7 +146,7 @@ export default Vue.extend({
   mounted() {
     this.$accessor.dailyBreadData.setIncome(this.value)
   },
-})
+} as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)
 </script>
 
 <style lang="scss" scoped>