Angular Typed

typed-form.ts

// tslint:disable:max-classes-per-file
import {
    AbstractControl,
    AbstractControlOptions,
    AsyncValidatorFn,
    FormArray,
    FormControl,
    FormGroup,
    ValidatorFn,
} from "@angular/forms";
import {Observable} from "rxjs";

interface TypedAbstractControl<T> extends AbstractControl {
    readonly value: T;
    readonly valueChanges: Observable<T>;
    // tslint:disable-next-line:no-any
    controls?: any;

    setValue(value: T, options?: object): void;
}

export class TypedFormArray<T> extends FormArray implements TypedAbstractControl<T[]> {
    public controls: TypedAbstractControl<T>[];
}

export class TypedFormGroup<T> extends FormGroup implements TypedAbstractControl<T> {
    public controls: {
        [KEY in keyof T]: TypedAbstractControl<T[KEY]>;
    };

    // tslint:disable-next-line:unnecessary-constructor
    constructor(controls: { [KEY in keyof T]: TypedAbstractControl<T[KEY]>; },
                validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
                asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
    ) {
        super(controls, validatorOrOpts, asyncValidator);
    }

    public addControl<K extends string & keyof T>(name: K, control: TypedAbstractControl<T[K]>): void {
        super.addControl(name, control);
    }

    public removeControl(name: string & keyof T): void {
        super.removeControl(name);
    }

    public setValue(value: T, options?: { onlySelf?: boolean; emitEvent?: boolean }): void {
        super.setValue(value, options);
    }

    public patchValue(value: Partial<T>, options?: { onlySelf?: boolean; emitEvent?: boolean }): void {
        super.patchValue(value, options);
    }

    public reset(value?: ResetState<T>, options?: { onlySelf?: boolean; emitEvent?: boolean }): void {
        super.reset(value, options);
    }

    public getRawValue(): T {
        return super.getRawValue();
    }
}

export class TypedFormControl<T> extends FormControl implements TypedAbstractControl<T> {

    public readonly value: T;

    constructor(formState?: T,
                validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
                asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null) {
        const type = typeof formState;
        super(type === "number" || type === "boolean" ? String(formState) : formState, validatorOrOpts, asyncValidator);
    }

    public setValue(value: T, options?: {
        onlySelf?: boolean;
        emitEvent?: boolean;
        emitModelToViewChange?: boolean;
        emitViewToModelChange?: boolean
    }): void {
        super.setValue(value, options);
    }

    public patchValue(value: T, options?: {
        onlySelf?: boolean;
        emitEvent?: boolean;
        emitModelToViewChange?: boolean;
        emitViewToModelChange?: boolean
    }): void {
        super.patchValue(value, options);
    }

    public reset(formState?: ResetState<T>, options?: { onlySelf?: boolean; emitEvent?: boolean }): void {
        super.reset(formState, options);
    }
}

type ResetState<T> = {
    [KEY in keyof T]: T[KEY] | InitialResetValue<T[KEY]>;
};

type InitialResetValue<T> = {
    [KEY in keyof T]: ResetState<T[KEY]>;
};

typed-simple-changes.ts

export type TypedSimpleChanges<COMPONENT extends object> = { [INPUT in keyof COMPONENT]: TypedSimpleChange<COMPONENT[INPUT]> }

export interface TypedSimpleChange<T> extends SimpleChange {
    previousValue: T;
    currentValue: T;
}