vue.js - Typescript Vue: usando un nombre de método en cadena dinámico

Mi objetivo es que se ejecute una función diferente dependiendo del valor de una variable. VS Code me está dando una advertencia de error que indica que:

'method' tiene implícitamente un tipo de 'any' porque 'type1Func' y 'type1Func' son cadenas y no se pueden usar como índice. Estoy usando una técnica similar en un archivo normal de Vue js con éxito, pero no sé cómo resolver esto en este archivo de TypeScript.

func handleListeningDevice(name: NewNameOption) {
  const method = !!name ? 'type1Func' : 'type2Func';
  
  this[method]({
    name: name ?? 'none',
  });
}

Respuesta #1

Antes que nada, bienvenido.

Una cosa que siempre tengo en mente cuando uso TypeScript es que puedes hacer lo mismo que haces con JS (ya que es JS pero con tipos), eso me ayuda a mantener la calma con TS.

El mensaje de error dice que no puedes usar string como un índice y eso es porque en el código this[method] method es el índice y method es una cadena, pero como ya sabes puedes acceder a las propiedades de un objeto por nombre, en otras palabras, indexadas con una cadena (así que el código funcionará en JS puro)

Para que funcione necesitas dar más información a TS para que deje de quejarse. Podrías, por ejemplo, darle un tipo any a method, con eso le estás diciendo a TS que en tiempo de ejecución el tipo será algo que se pueda usar

 func handleListeningDevice(name: NewNameOption) {
  const method:any = !!name ? 'type1Func' : 'type2Func';

  this[method]({
   name: name ?? 'none',
  });
}

O también puedes hacer una conversión de tipo mientras usas el método:

this[(method as any)]

O un tipo de conversión para this para indicar que una cadena puede ser un índice:

(this as {[key:string]:any})[method]

¡Comprueba qué te conviene más!