유형 스크립트 Vue: 메서드에 동적 문자열 이름 사용

유형 스크립트 Vue: 메서드에 동적 문자열 이름 사용

제 목표는 변수 값에 따라 다른 함수를 실행하는 것입니다.VS 코드가 다음과 같은 오류 경고를 표시합니다.

'method' implicitly has a type of 'any' because 'type1Func' and 'type1Func' are strings and can't be used as an index일반 Vue js 파일에서도 같은 기술을 사용하고 있습니다만, 이 타이프 스크립트 파일에서는 이 문제를 해결하는 방법을 모르겠습니다.

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

일단 환영합니다.

TypeScript를 사용할 때 유의해야 할 점은 JS에서와 같은 작업을 할 수 있다는 것입니다(JS이지만 타입에서도 마찬가지). TS에서 침착함을 유지할 수 있습니다.

에러 메세지에 「사용할 수 없습니다」라고 표시됩니다.string지표로서, 그것은 코드에 포함되어 있기 때문이다.this[method] method는 인덱스이고 method는 문자열이지만 이미 알고 있듯이 문자열로 인덱스된 다른 단어에서 이름으로 오브젝트 속성에 액세스할 수 있습니다(따라서 코드는 순수 JS에서 작동합니다).

이 기능을 사용하려면 TS에 더 많은 정보를 제공해야 합니다. 그래야 TS가 불만을 터뜨리지 않습니다.예를 들어, 당신은 그것을 줄 수 있다.any을 타이핑하다.method그러면 실행 시 유형을 사용할 수 있다고 TS에 알립니다.

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

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

또는 다음 방법을 사용하는 동안 활자 캐스팅을 수행할 수도 있습니다.

this[(method as any)]

또는 의 타입 캐스트this문자열이 인덱스가 될 수 있음을 나타냅니다.

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

자신에게 가장 적합한 것을 확인하세요!

언급URL : https://stackoverflow.com/questions/67202202/typescript-vue-using-a-dynamic-string-name-for-a-method