`Unexpected TypeScript error when updating store`

The issue arises with the error message: "Argument of type '(oldData: any) => any[]' is not assignable to parameter of type 'Trade[]'.ts". However, upon hovering over "update", it displays: "update: (value: Trade[]) => void", which appears correct to me.

export const trades: Writable<Trade[]> = writable([] as Trade[], function start(update) {
    streamer.on("polyTrades", (trades: Trade[]) => {

        update((oldData) => {
            const updateData = [ ...oldData, ...trades ]
            return updateData
        })
    })

    return function stop() {
        streamer.off("polyTrades")
    }
})

I have attempted to assign a type to "oldData" without success. It seems like this may be related to Svelte. Is there a straightforward solution to resolve this issue without resorting to //@ts-ignore?

Answer №1

The function used with the start method is a set function that does not require a callback, only the new value.

writable(value?: any, start?: (set: (value: any) => void) => () => void)

If a function is provided as the second argument, it will be triggered when the number of subscribers changes from zero to one (but not from one to two, and so on). This function will receive a set function which can modify the store's value. It should return a stop function that gets called when the subscriber count goes back down from one to zero.

(Documentation)

If you need the previous value, consider using trades.update directly.

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

Enumerated type alias in Typescript

Within my typings file, I have the following: declare namespace Somatic { enum PropType { html, object, css } } In a separate file named index.ts, I create a shorter alias for this enum like so: type PropType = Somatic.Pr ...

Determine the type of function arguments based on provided hints in TypeScript

It's common to encounter situations like this where TypeScript struggles to infer types due to lack of context. Is there a way to explicitly declare the type of function for the compiler? router.get('/get', imget); router.get('/send&a ...

Locate the minimum and maximum values between two inputted dates

I'm looking for a solution that provides strongly typed code. The problem arises when trying to implement solutions from a related question - Min/Max of dates in an array? - as it results in an error. TS2345: Argument of type 'Date' is not ...

The type 'HTMLDivElement | null' cannot be assigned to the type 'HTMLDivElement' in this context

Struggling with a scroll function to maintain position while scrolling up or down - encountering an error: Error: Type 'HTMLDivElement | null' is not assignable to type 'HTMLDivElement'. Type 'null' is not assignable to type & ...

What is the best way to rearrange elements within an object when there is no predetermined starting order?

Someone assisted me in refining this code snippet import React, { useEffect, useState } from "react"; import _ from "lodash"; // const SeleccionClientes = ""; const items = [ { client: "Microsoft", idClient: 0, idProjectType: 1, project ...

What factors contribute to 'tslib' having more downloads than 'typecrypt'?

How is it possible that 'tslib', a library for 'typescript', has more downloads than 'typescript' itself? If one does not use 'typescript', then they cannot utilize 'tslib' as well. Just because someone us ...

Tips for styling a mat-checkbox correctly

I'm working on customizing the appearance of a mat-checkbox (material2) to meet the following specifications: Always display a black border (#000000), regardless of whether the checkbox is checked or not When the checkbox is checked, show a white ti ...

Tips for accessing other environment variables within the environment.ts file in an Angular project

Currently, I am working on modifying the 'environment.ts' file within an Angular project to include additional properties. The current setup looks like this: export const environment = { production: false, apiUrl: 'http://example.com&ap ...

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is there a way to set the initial navigation theme based on the current route params without rendering the NavigationContainer and causing a flash of content with the default theme? Can the route be accessed from outside of the NavigationContainer without ...

The expiration of the Gitlab CI/CD cache leads to the failure of the build process

I have an AWS CDK application in TypeScript and a simple GitLab CI/CD pipeline with 2 stages for deployment: image: node:latest stages: - dependencies - deploy dependencies: stage: dependencies only: refs: - master changes: - ...

How can a component access its own template specified in the @Component decorator?

@Component({ selector: 'base-comp', template: '<div>hello</div>' <-- how to get this }) export class BaseComponent { someMethod( ) { <-- referenced here } Is there a way to access the entire template i ...

What is the best way to get both the id and name of a selected item in Angular?

Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...

Playing around with Segment Analytics testing using Jest in TypeScript

I've been struggling to write a unit test that verifies if the .track method of Analytics is being called. Despite my efforts, the test keeps failing, even though invoking the function through http does trigger the call. I'm unsure if I've i ...

I am having trouble with the routerExtensions.navigate function in my NativeScript app

I'm currently working on a simple NativeScript / Angular project that is based on the code sample located at: https://github.com/alexziskind1/nativescript-oauth2/tree/master/demo-angular This project allows users to log in with their Google credenti ...

Filter an item from an array of objects using its index (TypeScript and Next.js)

I am attempting to filter out a specific item from the list by using its index. For example, if I want to remove the item with index 0, I would pass the number 0 to the filter function in order to return all objects except for the one at position 0. Belo ...

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

I am currently working on integrating the ADAL JS sample code from this link into a SharePoint framework client web part. My code is fairly straightforward, as I have already installed packages like adal, fs, and node-fs using NPM. However, when running t ...

User authentication status is only unavailable within the component when redirection occurs

I have successfully implemented my dasboard component, which displays the user's auth.uid and projects fetched from firestore. However, there is a line //if (!auth.uid) return <Redirect to='/signin'/> that causes issues when uncommente ...

Exploring ways to conduct a thorough scan of object values, inclusive of nested arrays

My goal is to extract all values from an object. This object also includes arrays, and those arrays contain objects that in turn can have arrays. function iterate(obj) { Object.keys(obj).forEach(key => { console.log(`key: ${key}, value: ${o ...

In TypeScript, the argument 'xxx' cannot be passed to a parameter expecting a 'string' type

When I try to create a new Error object with the message {code: 404, msg: 'user is not existed'} in TypeScript, I receive the following error message: [ts] Argument of type '{ code: number; msg: string; }' is not assignable to paramete ...