Как исправить ошибку «No index signature...» при обращении к свойствам объекта?

Question

[Евгений Журов]

Объявление типов:

type AuthMessagesKeys = 'login' | 'logout' | 'session'

type AuthMessagesValues = 'text' | 'type'

type AuthMessagesParams = {
  [P in AuthMessagesValues]: string
}

type AuthMessages = {
  [P in AuthMessagesKeys] : AuthMessagesParams
}

export { AuthMessages }

Использование в компоненте Nuxt:

import Vue, { PropOptions } from 'vue'
import { AuthMessages } from '@/types/Auth'

export default Vue.extend({
  mounted() {
      const queryObject = this.$route.query
      const queryKey: string = queryObject.message

      if (message) {
          const messageType = this.messages[queryKey].type // здесь
          const messageText = this.messages[queryKey].text // и здесь - ошибка (см. ниже) 
          ...
      }
    },

    data() {
      return {
        messages: {
          login: {
            text: 'You have to be logged in',
            type: 'warning'
          },

          logout: {
            text: 'You have successfully logged out',
            type: 'success'
          },

          session: {
            text: 'Your session has been expired',
            type: 'error'
          }
        } as PropOptions<AuthMessages>
      }
    }
})

В выражениях this.messages[queryKey] возникает ошибка:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'PropOptions'.
No index signature with a parameter of type 'string' was found on type 'PropOptions'

В принципе, понятно, что имеется в виду, но непонятно, как изменить код, чтобы убрать ошибку.
Нашел несколько статей и видео на тему indexed types, но все равно никак не могу сообразить, что надо сделать именно в этом конкретном случае?

Comments

[Михаил]

Полагаю что из-за этого const queryKey: string
дэг, замените на : AuthMessagesKeys

Answer 1

[Aetae]

const queryKey: AuthMessagesKeys = queryObject.message

Это сработает, но не надёжно - потому что может упасть в рантайме если в message прилетит что-то левое.
Лучше написать тайпгард, типа

function isAuthMessagesKey(str: string): str is AuthMessagesKeys {
  return ['login', 'logout', 'session'].includes(str); 
}

и делать проверку перед использованием.