Propsの型定義方法の変更

traPtitech · Apr 6, 2020 · 72ddf13 · 72ddf13
1 parent 656616c
commit 72ddf13
Show file tree

Hide file tree

Showing 81 changed files with 511 additions and 787 deletions.
diff --git a/src/components/Authenticate/AuthenticateButtonPrimary.vue b/src/components/Authenticate/AuthenticateButtonPrimary.vue
@@ -4,18 +4,14 @@
     :style="styles.container"
     @click="context.emit('click')"
   >
-    {{ props.label }}
+    {{ label }}
   </button>
 </template>
 
 <script lang="ts">
 import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  label: string
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -32,9 +28,9 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, context, styles }
+    return { context, styles }
   }
 })
 </script>

diff --git a/src/components/Authenticate/AuthenticateButtonSecondary.vue b/src/components/Authenticate/AuthenticateButtonSecondary.vue
@@ -5,12 +5,12 @@
     @click="context.emit('click')"
   >
     <icon
-      v-if="props.iconName"
+      v-if="iconName"
       :class="$style.icon"
-      :name="props.iconName"
-      :mdi="props.iconMdi"
+      :name="iconName"
+      :mdi="iconMdi"
     />
-    {{ props.label }}
+    {{ label }}
   </button>
 </template>
 
@@ -19,12 +19,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 
-type Props = {
-  label: string
-  iconName?: string
-  iconMdi: boolean
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -43,9 +37,9 @@ export default defineComponent({
     iconName: String,
     iconMdi: { type: Boolean, default: false }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, context, styles }
+    return { context, styles }
   }
 })
 </script>

diff --git a/src/components/Authenticate/AuthenticateHeader.vue b/src/components/Authenticate/AuthenticateHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <span v-if="props.title" :class="$style.logoWithTitle">
+    <span v-if="title" :class="$style.logoWithTitle">
       <img src="/img/traq-logo.svg" :class="$style.logo" />
-      <span :class="$style.title">{{ props.title }}</span>
+      <span :class="$style.title">{{ title }}</span>
     </span>
     <img v-else src="/img/traq-logo-full.svg" :class="$style.fullLogo" />
   </div>
@@ -13,10 +13,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import useInput from '@/use/input'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  title?: string
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -35,9 +31,9 @@ export default defineComponent({
   props: {
     title: String
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, styles }
+    return { styles }
   }
 })
 </script>

diff --git a/src/components/Authenticate/AuthenticateInput.vue b/src/components/Authenticate/AuthenticateInput.vue
@@ -1,31 +1,30 @@
 <template>
   <div>
     <label :for="id" :class="$style.title" :style="styles.title">{{
-      props.label
+      label
     }}</label>
     <input
       :class="$style.input"
       :id="id"
       :style="styles.input"
-      :value="props.text"
-      :type="props.type"
+      :value="text"
+      :type="type"
       @input="onInput"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  SetupContext,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import useInput from '@/use/input'
 import { makeStyles } from '@/lib/styles'
 import { randomString } from '@/lib/util/randomString'
 
-type Props = {
-  text: string
-  label: string
-  type: 'text' | 'password'
-}
-
 const useStyles = () =>
   reactive({
     title: makeStyles(theme => ({
@@ -42,13 +41,16 @@ export default defineComponent({
   props: {
     text: { type: String, default: '' },
     label: { type: String, default: '' },
-    type: { type: String, default: 'text' }
+    type: {
+      type: String as PropType<'text' | 'password'>,
+      default: 'text' as const
+    }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const { onInput } = useInput(context)
     const styles = useStyles()
     const id = randomString()
-    return { props, styles, onInput, id }
+    return { styles, onInput, id }
   }
 })
 </script>

diff --git a/src/components/Authenticate/AuthenticateMainView.vue b/src/components/Authenticate/AuthenticateMainView.vue
@@ -1,14 +1,14 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <authenticate-modal>
-      <login-form v-if="props.type === 'login'" />
-      <registration-form v-if="props.type === 'registration'" />
+      <login-form v-if="type === 'login'" />
+      <registration-form v-if="type === 'registration'" />
     </authenticate-modal>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import AuthenticateModal from './AuthenticateModal.vue'
 import LoginForm from './LoginForm.vue'
@@ -21,10 +21,6 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  type: 'login' | 'password-reset' | 'registration'
-}
-
 export default defineComponent({
   name: 'AuthenticateMainView',
   components: {
@@ -34,17 +30,13 @@ export default defineComponent({
   },
   props: {
     type: {
-      type: String,
-      default: 'login'
+      type: String as PropType<'login' | 'password-reset' | 'registration'>,
+      default: 'login' as const
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-
-    return {
-      props,
-      styles
-    }
+    return { styles }
   }
 })
 </script>

diff --git a/src/components/Authenticate/AuthenticateSeparator.vue b/src/components/Authenticate/AuthenticateSeparator.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <span :class="$style.hr" :style="styles.hr"></span>
     <span :class="$style.label" :style="styles.label">
-      {{ props.label }}
+      {{ label }}
     </span>
     <span :class="$style.hr" :style="styles.hr"></span>
   </div>
@@ -12,10 +12,6 @@
 import { defineComponent, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  label: string
-}
-
 const useStyles = () =>
   reactive({
     hr: makeStyles(theme => ({
@@ -34,9 +30,9 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-    return { props, styles }
+    return { styles }
   }
 })
 </script>

diff --git a/src/components/Authenticate/use/login.ts b/src/components/Authenticate/use/login.ts
@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import { reactive } from '@vue/composition-api'
 import api from '@/lib/api'
 
 const useLogin = () => {

diff --git a/src/components/Main/MainView/MainViewComponentSelector.vue b/src/components/Main/MainView/MainViewComponentSelector.vue
@@ -8,31 +8,32 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import { LayoutType, ViewInformation } from '@/store/ui/mainView/state'
-import { VNode } from 'vue'
 
 import MessagesView from '@/components/Main/MainView/MessagesView.vue'
 import QallView from '@/components/Main/MainView/QallView.vue'
 
-type Props = {
-  viewInfo?: ViewInformation
-}
-
 export default defineComponent({
   name: 'MainViewComponentSelector',
   components: { MessagesView, QallView },
   props: {
-    viewInfo: Object
+    viewInfo: Object as PropType<ViewInformation>
   },
-  setup(props: Props) {
+  setup(props) {
     const channelId = computed(
       () => store.state.domain.messagesView.currentChannelId
     )
 
     return {
-      props,
+      // TODO: https://github.com/vuejs/composition-api/issues/291
+      props: props as { viewInfo: ViewInformation | undefined },
       channelId
     }
   }

diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header :class="$style.container" :style="styles.container">
     <h2>
-      <main-view-header-channel-name :channel-id="props.channelId" />
+      <main-view-header-channel-name :channel-id="channelId" />
     </h2>
     <main-view-header-tools
       :class="$style.tools"
@@ -14,7 +14,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { ChannelId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
@@ -69,14 +74,18 @@ export default defineComponent({
     MainViewHeaderChannelName,
     MainViewHeaderTools
   },
-  props: { channelId: String },
-  setup(props: Props) {
+  props: {
+    channelId: {
+      type: String as PropType<ChannelId>,
+      required: true
+    }
+  },
+  setup(props) {
     const { channelState } = useChannelState(props)
     const { starChannel, unstarChannel } = useStarChannel(props)
     const { openNotificationModal } = useNotificationModal(props)
     const styles = useStyles()
     return {
-      props,
       channelState,
       styles,
       starChannel,

diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue
@@ -24,7 +24,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive, Ref } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  Ref,
+  PropType
+} from '@vue/composition-api'
 import { ChannelId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
@@ -72,8 +78,13 @@ const useStyles = (pathInfoList: Ref<readonly ChannelPathInfo[]>) =>
 
 export default defineComponent({
   name: 'MainViewHeaderChannelName',
-  props: { channelId: String },
-  setup(props: Props) {
+  props: {
+    channelId: {
+      type: String as PropType<ChannelId>,
+      required: true
+    }
+  },
+  setup(props) {
     const state = reactive({
       channels: computed(() => store.state.entities.channels)
     })
@@ -86,7 +97,7 @@ export default defineComponent({
     )
     const buildChannelLink = (path: string[]) => `/channels/${path.join('/')}`
     const styles = useStyles(pathInfoList)
-    return { props, state, styles, ancestorsPath, pathInfo, buildChannelLink }
+    return { state, styles, ancestorsPath, pathInfo, buildChannelLink }
   }
 })
 </script>