PropType<T>を使う refs #101

.eslintrc.js

@@ -6,7 +6,11 @@ module.exports = {
   parserOptions: {
     parser: '@typescript-eslint/parser'
   },
-  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
+  extends: [
+    'plugin:vue/strongly-recommended',
+    '@vue/prettier',
+    '@vue/typescript'
+  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

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>

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>

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>

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>

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>

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>

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 = () => {

src/components/Main/MainView/MainViewComponentSelector.vue

@@ -1,38 +1,39 @@
 <template>
   <messages-view
     v-if="props.viewInfo && props.viewInfo.type === 'messages'"
-    :channelId="channelId"
+    :channel-id="channelId"
   />
   <qall-view v-else-if="props.viewInfo && props.viewInfo.type === 'qall'" />
   <div :class="$style.none" v-else></div>
 </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
     }
   }

src/components/Main/MainView/MainViewController.vue

@@ -6,11 +6,11 @@
     <div :class="$style.layoutContainer" :data-layout="state.layout">
       <main-view-component-selector
         :class="[$style.componentContainer, $style.primary]"
-        :viewInfo="state.primary"
+        :view-info="state.primary"
       />
       <main-view-component-selector
         :class="[$style.componentContainer, $style.secondary]"
-        :viewInfo="state.secondary"
+        :view-info="state.secondary"
       />
     </div>
   </div>

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,