The error message restricts object literals to declared properties

export const setLighting = createAction(
  '[Ui] SET_BACKGROUND',
  props<{
    lighting: Array<{ target: LightD; value: LightE | undefined }>
  }>(),
)


readonly setBackgroundLighting$ = this.stateTheme$.pipe(
    pluck(LightD.LEFT,LightD.RIGHT ),
    distinctUntilChanged(),
    map(value =>
      setLighting({
       lighting:{target:LightD.LIGHT,value}
        }),
    ),
  )

export const LightD: {
    readonly CLIGHT: "CLIGHT";
    readonly LIGHT: "LIGHT";
    readonly LEFT: "LEFT";
    readonly RIGHT: "RIGHT";

Encountering error Type '{ target: "LIGHT"; value: unknown; }' cannot be assigned to type '{ target: LightD; value: LightE| undefined; }[]'. Object literal is restricted to known properties only, and 'target' does not match with 'target' in type '{ target: LightD; value: LightE | undefined; }[]'.ts(2322) The anticipated type originates from property 'lighting' that is defined here on type '{ lighting: { target: LightD; value: LightE| undefined; }[]; }'

angulartypescript

Answer №1

First and foremost, lighting is described as an array, so the proper approach would be:

readonly setBackgroundLighting$ = this.stateTheme$.pipe(
    pluck(LightD.LEFT,LightD.RIGHT ),
    distinctUntilChanged(),
    map((value: LightE) =>
      setLighting({
       lighting:[{target:LightD.LIGHT,value}]
        }),
    ),
  )

Additionally, are you certain that the definition of LightD is accurate? It seems like you may be seeking an enum rather than an object containing string values?

enum LightD {
    CLIGHT = "CLIGHT",
    LIGHT = "LIGHT",
    LEFT = "LEFT",
    RIGHT = "RIGHT"
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing specific route through a named outlet

Is it possible to achieve something like this? [routerLink]="['page1','page2',{ outlets: { myoutlet: ['page3','page4'] } }]" How should a route configuration be set up for lazy loading? Edit: It seems that the in ...

angular

Unit Testing Angular: Mastering Unit Testing for the .map() Function

I am in need of testing a service method, but I am unsure about how to achieve complete coverage for the code that gets executed as a result of calling another injected service method. The Service Method to be tested: @Injectable() export class BomRevisi ...

javascriptangularunit-testingjasmineangular-unit-test

A guide on renewing authentication tokens in the Nestjs framework

import { ExtractJwt, Strategy } from 'passport-jwt'; import { AuthService } from './auth.service'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable, UnauthorizedException } from '@nestjs/common&apo ...

javascriptnode.jstypescriptpassport.jsnestjs

What is the process for integrating GraphQL resolvers in Typescript using Graphql-codegen?

With the goal of learning Apollo Server, I decided to implement the schema outlined here. The CodeGen produced what seemed to be logical type definitions for books and libraries. export type Book = { __typename?: 'Book'; author: Author; tit ...

typescriptgraphqlapollo-servergraphql-codegen

Efficiently storing a newly shuffled list of tasks into the db.json file using Angular

This is the content of my db.json document { "tasks": [ { "id": 1, "text": "Doctors Appointment", "day": "May 5th at 2:30pm", "reminder": true }, { ...

jsonangulartypescript

How is it possible that a string type is present in the else block of the code after being processed in the if block?

While studying about equality narrowing in typescript, I came across a function example from the official handbook (view it on playground): function example(x: string | number, y: string | boolean) { if (x === y) { // We can now call any 'string ...

typescript

Organizing Ionic Cards in Alphabetical Order

I'm working on a personal project where I want to implement an alphabetical filter. Each time I create an Ionic card, I intend for it to be filtered by the first name, such as Andre, Amber, Beckc, etc... Here's what I have so far: https://gyazo.c ...

angularionic2

Set up Angular library by downloading from a specified local or network location

If I were to create an Angular library using the following commands: ng new libraries-workspace --create-application=false cd libraries-workspace ng generate library test-library After creating and building the library using the command below: ng build te ...

angularnpmangular-library

The ActivatedRoute snapshot does not function properly when used in the TypeScript class constructor

Currently, I am encountering a challenge with TypeScript and Angular 2. The structure of my TS class is as follows: 'import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ ...

angulartypescriptangular2-routing

Display a message stating "No data available" using HighCharts Angular when the data series is empty

My Angular app utilizes Highchart for data visualization. One of the requirements is to display a message within the Highchart if the API returns an empty data set. I attempted a solution, but unfortunately, the message does not appear in the Highchart a ...

javascriptangularhighcharts

Oops! Error in JSX React/TypeScript Context Provider: SyntaxError - Unexpected token. Make sure to check for

Encountering a SyntaxError when incorporating a Context Provider in my React TypeScript project. The error points to an unexpected token and a missing comma within the JSX. export const MapProvider: React.FC<React.PropsWithChildren<{}>> = ({ ch ...

typescriptreact-nativesyntax-error2d-context-api

The result of comparing with `instanceof` in TypeScript

class Department { name: string; constructor(n: string) { this.name = n; } describe(this: Department){ console.log('department: ' +this.name); } } const frontend = new Department('frontend'); frontend.describe(); con ...

typescript

Angular's Motion Module

Incorporating Angular-5 into my project has introduced a plethora of animations on various pages. While the utilization of jQuery provides a straightforward approach for adding and removing classes to DOM elements, it is frequently advised against using jQ ...

jqueryhtmlcssangularanimation

The functionality of Angular assets is limited to local hosting only

I am encountering an issue with serving my Angular application on a custom host. Currently, I am using the following command: ng serve --host 192.168.1.14 --disable-host-check --ssl true --ssl-cert ./192.168.1.14.pem --ssl-key ./192.168.1.14-key.pem This ...

angular

What are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Looking for some innovative ideas on how to approach this challenge. I have a test helper utils with added types: import { jest } from '@jest/globals' import React from 'react' // https://learn.reactnativeschool.com/courses/781007/lect ...

javascriptreactjstypescriptreact-nativejestjs

"Navigate with ease using Material-UI's BottomNavigationItem and link

What is the best way to implement UI navigation using a React component? I am currently working with a <BottomNavigationItem /> component that renders as a <button>. How can I modify it to navigate to a specific URL? class FooterNavigation e ...

javascriptreactjstypescriptmaterial-designmaterial-ui

What should be done if client.sendRequest(req, cursor).then((answer) does not return a response?

I am working with a VS Code client that sends requests to a server using the following code: client.sendRequest(req, cursor).then((answer)=> { processing... }) If for some valid reason the server does not send any response, what will happen? Is there ...

typescriptvisual-studio-codevscode-extensionslanguage-server-protocol

I can't seem to figure out why my Angular 10 select element is not showing the data I've assigned to it. Can someone help me

I'm currently facing an issue with a select element in the HTML template of my Angular project. The problem stems from having a JSON file containing all countries data. Languages Interface export interface Country{ name:string code:string } ...

htmljsonangularselectbootstrap-selectpicker

Course completed following the module

As a newcomer to Angular, I am facing an issue with saving data in a class and reading it into a component. It seems that the component is rushing to display results before the class has finished processing them, resulting in an error message being printed ...

angulartypescriptangular8