Error de Angular TypeScript - El tipo 'number' no se puede asignar al tipo 'any[]'

Tengo un problema con los tipos en mi componente de Angular. Tengo un formulario que obtiene un valor de un input y envía datos al servidor. Quiero que los datos tengan el tipo specs: string[] pero el compilador me lanza un error:

El tipo 'number' no se puede asignar al tipo 'any[]'

Sin embargo, si lo cambio a specs=[] funciona bien. Busqué en la documentación de Angular y TypeScript para encontrar una explicación, pero no encontré ninguna respuesta a mi problema.

Aquí está mi componente HTML:

<div class="container list-group" [formGroup]="specForm" (ngSubmit)="setSpec()">
  <div class="list-group-item information">
    Speciality: <a href="#" class="header-picture"><img src="assets/static/img/edit.png" alt=""></a>
  </div>
  <div class="list-group-item info-field-list">
    <div class="info-field-name">
      <p>Sector:</p>
    </div>
    <div class="info-field-value" *ngFor="let user of users;let i=index">
      <div class="info-field-value">
        <a class="url"> {{user.speciality}} </a> (3lvl)
      </div>
    </div>
    <div class="info-field-value">
      <input type="text" class="spec-input" formControlName="speciality" placeholder="Write text"><span
        class="icon icon-plus" (click)="setSpec()"></span>
    </div>
  </div>
</div>

Y archivo TS:

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { AuthenticationService } from '@services/auth.service';

@Component({
  selector: 'app-speciality',
  templateUrl: './speciality.component.html',
  styleUrls: ['./speciality.component.css']
})
export class SpecialityComponent implements OnInit {
  @Input() user;
  specs: string[];
  specForm: FormGroup;
  submitted = false;
  loading = false;
  constructor(private formBuilder: FormBuilder, private authService: AuthenticationService) { }

  ngOnInit() {
    this.specForm = this.formBuilder.group({
      speciality: ['']
    });
    this.authService.getUser().subscribe(
      (data) => {
        //this.specs = data.speciality;
      });
  }

  get s() { return this.specForm.controls; }

  setSpec() {
    // activating submission flag for patch function
    console.log(this.specs)
    let newSpec = this.specs.push(this.s.speciality.value)
    this.submitted = true;
    console.log(this.specs)

    if (!this.specForm.valid) {
      return
    }

    this.authService
      // sending values to auth service function
      .specAdd(newSpec)
      .subscribe(
        (data) => {
          this.submitted = false;
        },
        error => {
          this.loading = false;
        });
  }

}

Cualquier ayuda sería apreciada.

Respuesta #1

El problema es que estás asignando el resultado de Array.push al array, Array.push devuelve un número que muestra la longitud del array, solo en el primer push al array, luego asigna el array a uno nuevo:

let newSpec = this.specs.push(this.s.speciality.value)

debería ser:

this.specs.push(this.s.speciality.value)
let newSpec = this.specs