Estoy usando mapbox con angular. Y trato de mostrar / ocultar algunas cosas con mapbox.

Entonces tengo este componente:

export class ToggleLayersComponent implements OnInit {
  layouts = {
    contours: {
      visibility: 'visible',
      'line-join': 'round',
      'line-cap': 'round',
    },
    museums: {
      visibility: 'visible',
    },
  };

  ngOnInit() {}

  toggleLayer(evt: {value: 'contours' | 'museums'}) {
    this.layouts[evt.value] = {
      ...this.layouts[evt.value],
      visibility: this.layouts[evt.value].visibility === 'visible' ? 'none' : 'visible',
    };
  }
}

Pero recibo este error:

Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
  Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
    Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string;

Por supuesto que busqué en Google primero. Pero no encuentro ninguna solución.

Entonces, ¿cómo arreglar esto?

Gracias

Entonces el error está en esta línea:

 this.layouts[evt.value] 

Así que ya ni siquiera puedo ejecutar Angular:

ERROR in src/app/desktop-dashboard/toggle-layer/toggle-layer.component.ts:63:5 - error TS2322: Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.    
  Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.      
    Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string; 'line-cap': string; }': 'line-join', 'line-cap'

63     this.layouts[evt.value] = {
3
mightycode Newton 29 oct. 2020 a las 15:56

1 respuesta

La mejor respuesta

El compilador TypeScript no es lo suficientemente "inteligente" en este momento. Cuando tu lo hagas:

this.layouts[evt.value] = {
  ...this.layouts[evt.value]
}

Ve el evt.value como tipo 'contours' | 'museums', y no puede inferir que dos veces es el mismo valor, y dos veces será el mismo objeto. Básicamente te está impidiendo hacer:

this.layouts['contours'] = {
  ...this.layouts['museums']
}

En su ejemplo, puede hacer lo siguiente

this.layouts[evt.value].visibility = this.layouts[evt.value].visibility === 'visible'
  ? 'none'
  : 'visible';

Pero supongo que no desea hacerlo de esta manera, porque la detección de cambios podría no ver que la referencia del objeto ha cambiado. Si eso es un problema para usted, no veo otra forma que engañar al compilador:

toggleLayer(evt: {value: 'contours' | 'museums'}) {
  const key = evt.value as 'contours';

  this.layouts[key] = {
    ...this.layouts[key],
    visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible'
  };
}
2
Poul Kruijt 29 oct. 2020 a las 13:13