Angular-元素隱式具有“任何”型別，因為“字串”型別的運算式不能用于索引型別

我在 Angular-13 中有這段代碼：

export class ShowValidationErrorsComponent {

 private static readonly errorMessages = {
    'required': () => 'This field is required.',
    'minlength': (params: { requiredLength: any; }) => `Value must be at least' ${params.requiredLength} characters long.`,
    'maxlength': (params: { requiredLength: any; }) => `Value must be shorter than ${params.requiredLength} characters.`,
    'pattern': (params: { requiredPattern: string; }) => 'The required pattern is: '   params.requiredPattern
 };

 @Input() private control!: AbstractControlDirective | AbstractControl;
 @Input() private shouldShow: boolean = true;
 @Input() extraCssClasses: string = '';

   showList(): boolean {
    return !!(this.control &&
      this.control.errors &&
      this.shouldShow);
  }

  listOfErrors(): string[] {
    let errors: string[] = [];
    for (let field of Object.keys(this.control.errors!)) {
      if (field in ShowValidationErrorsComponent.errorMessages) {
        errors.push(ShowValidationErrorsComponent.errorMessages[field](this.control.errors![field]));
      }
      else if ('message' in this.control.errors![field]) {
        errors.push(this.control.errors![field].message);
      }
    }
    return errors;
  }
}

我用于驗證。但我得到了這個錯誤：

元素隱式具有“任何”型別，因為“字串”型別的運算式不能用于索引型別“{ required: () => string; minlength: (params: { requiredLength: any; }) => string; maxlength: (params: { requiredLength: any; }) => string; 模式：（引數：{ requiredPattern：字串；}）=>字串；}'。在 '{ required: () => string; 型別上找不到帶有“string”型別引數的索引簽名；分鐘

這行代碼突出顯示：

ShowValidationErrorsComponent.errorMessages[欄位]

在

errors.push(ShowValidationErrorsComponent.errorMessagesfield);

我該怎么做才能解決它？

謝謝

uj5u.com熱心網友回復：

發生這種情況是因為隱式型別errorMessages如下：

type ErrorMessagesType = {
    required: () => string;
    minlength: (params: { requiredLength: any }) => string;
    maxlength: (params: { requiredLength: any }) => string;
    pattern: (params: { requiredPattern: string }) => string;
}

如您所見，這是非常具體errorMessages的，它與您的價值結構完全匹配。這是因為編譯器無法安全地猜測您對該型別的意圖是什么。因此，它會根據值實際包含的內容來構造型別。

通常，這非常有效，允許您在任何地方使用具有強型別安全性的型別。但是當您想要動態訪問事物時，它會很快中斷。

在您的情況下，您使用 . 檢查是否是該物件field的有效鍵。有了這個，編譯器知道做自己是安全的訪問。但它不知道您訪問了哪些值，因此它無法猜測結果的實際型別。errorMessagesfield in ShowValidationErrorsComponent.errorMessageserrorMessages[field]

最后，對于這樣的情況，您應該考慮指定一個符合您意圖的顯式型別。在這種情況下，我假設您想要某種從欄位名稱到驗證函式的映射。您可以Record<K, T>為此使用型別：

private static readonly errorMessages: Record<string, Function> = {
    'required': () => 'This field is required.',
    'minlength': (params: { requiredLength: any; }) => `Value must be at least' ${params.requiredLength} characters long.`,
    'maxlength': (params: { requiredLength: any; }) => `Value must be shorter than ${params.requiredLength} characters.`,
    'pattern': (params: { requiredPattern: string; }) => 'The required pattern is: '   params.requiredPattern
};

不幸的是，您的驗證函式不具有共同的形狀，因此您無法在那里獲得比僅僅知道它是一個函式更好的型別。所以這就是你可以在那里使用的。

有了這個，編譯器至少能夠正確決議errorMessages[field]訪問并告訴結果是它可以呼叫的函式。

標籤：有角度的 打字稿

上一篇：值0顯示在輸入中，如何洗掉它？

下一篇：Angular-型別'(c:FormControl)=>ValidationError|null'不可分配給型別'ValidatorFn'