代码之家  ›  专栏  ›  技术社区  ›  Sergey

TypeScript扩展角度表单组模型

  •  0
  • Sergey  · 技术社区  · 5 年前

    我已经创建了一些其他表单组通用的基本模型。

    export class BaseResource {
        isActive: FormControl;
        number: FormControl;
        name: FormControl;
        type: FormControl;
    
        constructor(
            {
                number = null,
                name = null,
                type = null,
                isActive = true
            }: BaseResourceInterface
        ) {
            this.number = new FormControl(number);
            this.name = new FormControl(name);
            this.type = new FormControl(type);
            this.isActive = new FormControl(isActive);
        }
    }
    

    this.formBuilder.group(new LocationResource()) .

    export class LocationResource extends BaseResource {
        cabinetType: FormControl;
        serviceLevel: FormControl;
        sanitaryStandard: FormControl;
        patientsAmount: FormControl;
        bedAmount: FormControl;
        workPlaceType: FormControl;
        building: FormControl;
        floor: FormControl;
        totalArea: FormControl;
        effectiveArea: FormControl;
        contacts: FormControl;
    
        constructor(
            {
                cabinetType,
                serviceLevel,
                sanitaryStandard,
                patientsAmount,
                bedAmount,
                workPlaceType,
                building,
                floor,
                totalArea,
                effectiveArea,
                contacts,
                ...baseProps
            }: LocationResourceInterface = {
                cabinetType: null,
                serviceLevel: null,
                sanitaryStandard: null,
                patientsAmount: null,
                bedAmount: null,
                workPlaceType: null,
                building: null,
                floor: null,
                totalArea: null,
                effectiveArea: null,
                contacts: null,
                name: null,
                number: null,
                type: null,
                isActive: null
            }
        ) {
            super(baseProps);
    
            this.cabinetType = new FormControl(cabinetType);
            this.serviceLevel = new FormControl(serviceLevel);
            this.sanitaryStandard = new FormControl(sanitaryStandard);
            this.patientsAmount = new FormControl(patientsAmount);
            this.bedAmount = new FormControl(bedAmount);
            this.workPlaceType = new FormControl(workPlaceType);
            this.building = new FormControl(building);
            this.floor = new FormControl(floor);
            this.totalArea = new FormControl(totalArea);
            this.effectiveArea = new FormControl(effectiveArea);
            this.contacts = new FormControl(contacts);
        }
    }
    

    我想有更优雅的方法来定义初始值,这就是我想要的。

    BaseResource (因为它们在类中有初始值)但是TypeScript正在抛出错误,尽管它可以工作。

    1 回复  |  直到 5 年前
        1
  •  0
  •   Sergey    5 年前

    找到了我问题的答案 here . 现在我的班级看起来是这样

    export class LocationResource extends BaseResource {
        cabinetType: FormControl;
        serviceLevel: FormControl;
        sanitaryStandard: FormControl;
        workersAmount: FormControl;
        bedAmount: FormControl;
        workPlaceType: FormControl;
        building: FormControl;
        floor: FormControl;
        totalArea: FormControl;
        effectiveArea: FormControl;
        contacts: FormControl;
    
        constructor(
            {
                cabinetType = null,
                serviceLevel = null,
                sanitaryStandard = null,
                workersAmount = null,
                bedAmount = null,
                workPlaceType = null,
                building = null,
                floor = null,
                totalArea = null,
                effectiveArea = null,
                contacts = null,
                ...baseProps
            }: LocationResourceInterface = {}
        ) {
            super(baseProps);
    
            this.cabinetType = new FormControl(cabinetType);
            this.serviceLevel = new FormControl(serviceLevel);
            this.sanitaryStandard = new FormControl(sanitaryStandard);
            this.workersAmount = new FormControl(workersAmount);
            this.bedAmount = new FormControl(bedAmount);
            this.workPlaceType = new FormControl(workPlaceType);
            this.building = new FormControl(building);
            this.floor = new FormControl(floor);
            this.totalArea = new FormControl(totalArea);
            this.effectiveArea = new FormControl(effectiveArea);
            this.contacts = new FormControl(contacts);
        }
    }
    

    在接口中,所有属性都标记为可选。