vee-validate3 모든 규칙 추가시 TS7053 오류

작성일 Edited on In , ,

TS7053

3.0 버전이 되면서 HOC 기반으로 변경되며 rules를 상위 컴포넌트에서 확장하게 되었다.
문제는 typescript 기반에서 룰 전체 등록이 TS(7053) 에러를 발생시킨다.

1
2
3
4
5
6
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]); // rules[rule] 에서 타입오류 발생
});
1
2
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import(".../node_modules/vee-validate/dist/rules")'.
No index signature with a parameter of type 'string' was found on type 'typeof import(".../node_modules/vee-validate/dist/rules")'.ts(7053)

원인

import, export 의 모듈명은 string index 로 쳐지지 않아 발생한다.

해결방법

Object.entries와 for of를 사용해 타입에 안전하게 돌려주면 된다.

1
2
3
4
5
6
7
8
import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

for (let [rule, validation] of Object.entries(rules)) {
  extend(rule, {
    ...validation,
  });
}

여담

  • 새로운 구문 (async/await, import/export)를 사용해 돌릴 땐 먼저 for of를 사용하는 습관을 들여야겠다.
  • 머지되어서 다음 사람의 삽질은 없을 듯 하다.

참조

  • Merged docs: added Installing All Rules with typescript
  • vee-validate#installing-all-rules