«Исправить» Angular за 1 минуту

Добавьте отсутствующие типы в Angular и упростите кодирование

Я заметил два распространенных случая, когда Angular использует any вместо правильного типа. При использовании any нам не хватает функций безопасности типов и автозаполнения TypeScript.

Я написал эти фрагменты, чтобы сделать эти случаи строго типизированными, и, поскольку они хорошо работают, я решил поделиться ими.

Типизированные простые изменения (ngOnChanges)

Возможно, это временное исправление, так как PR находится на рассмотрении (отправлено в феврале 2018 г.).

import { SimpleChange } from '@angular/core';
export type TypedSimpleChanges<T> = {
  [P in keyof T]: SimpleChange;
};

Использование:

ngOnChanges(changes: TypedSimpleChanges<MyClass>) {
  if (changes.myProp && changes.myProp.isFirstChange()) {
  ...
  }
}

Типизированная группа форм

import { FormGroup } from '@angular/forms';
export interface TypedFormGroup<T> extends FormGroup {
  readonly value: Partial<T>;
}

Использование:

form: TypedFormGroup<ContactRequest>;
// Now this.form.value type is ContactRequest

Создать типизированную группу форм

import { ValidatorFn } from '@angular/forms';
export type TypedControlsConfig<T> = {
  [key in keyof T]?: T[key] | [T[key]] | [T[key], Array<ValidatorFn>];
};
export function createForm<T>(fb: FormBuilder, fields: TypedControlsConfig<T>): TypedFormGroup<T> {
  return fb.group(fields);
}

Использование:

this.form = createForm<ContactRequest>(this.fb, {
 fullName: [null, [Validators.required]],
 email: [null, [Validators.required, Validators.email]],
 message: [null, [Validators.required, Validators.maxLength(200)]]
});

Надеюсь, вы найдете эти фрагменты полезными.

Подпишитесь на Front End Beyond для получения дополнительных статей, связанных с интерфейсом.