The issue lies with the Cookies.get function, as the Typescript narrowing feature does not

Struggling with types in TypeScript while trying to parse a cookie item using js-cookie:

// the item 'number' contains a javascript number (ex:5)
let n:number 
if(typeof Cookies.get('number')!== 'undefined'){
    n = JSON.parse(Cookies.get('number'))
}else{
    n = 0
}

Typescript: Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'

Referring to the example in TypeScript's documentation: https://www.typescriptlang.org/docs/handbook/2/narrowing.html

Is there an error in this code snippet?

javascripttypescript

Answer №1

When you have two calls to Cookies.get('number'), TypeScript cannot determine if the same value is being returned each time.

To address this, it's best to store the value in a variable:

let n:number 
let value = Cookies.get('number')
if(typeof value !== 'undefined'){
    n = JSON.parse(value)
}else{
    n = 0
}

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

What is the best way to implement the Active list element feature in my menu bar?

The current list element is : <li class="nav__item"><a class="nav__link nav__link--active " href="#"... The standard list element is: <li class="nav__item"><a class="nav__link " href=&quo ...

javascripthtmljquerycss

What is the TypeScript's alternative to ReasonML's option type?

When using ReasonML, the option type is a variant that can be either Some('a) or None. If I were to represent the same concept in TypeScript, how would I go about it? ...

typescriptreasonrescript

Have you considered utilizing encodeURIComponent to encode both the key and parameter values?

When I use encodeURIComponent in this code snippet: export function getDownloadFileUrl(fid: string,bgColor: string) { const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor); const config = { m ...

typescripthttp

What is the alternative method in JavaScript for locating items instead of using indexOf?

I have a set of paths in an array. Some paths are classified as constants while others are labeled as dynamic. A constant path would be something like "/booking-success", whereas a dynamic path could be something like '/arrival/view/:job_or ...

javascriptjqueryreactjs

Unable to find / DELETE Express.js

Within my script, I am attempting to perform POST, GET, and DELETE operations. Whenever I use POST or GET, the correct messages are logged. However, whenever I attempt to use DELETE, I encounter the following error: Cannot GET /del_user The URL I have ...

javascriptnode.jsexpress

Creating an object using a string in node.js

I have a string that I am sending from AngularJS to NodeJS in the following format. "{↵obj:{↵one:string,↵two:integer↵}↵}" //request object from browser console To convert this string into an object and access its properties, I am using the serv ...

javascriptangularjsjsonnode.jsstring

What is the most effective way to organize an array according to a key function that is computationally intensive?

After posting this question regarding sorting an array with a key function, it became evident that utilizing a comparison function was inevitable. The challenge at hand includes: Having a resource-intensive key function that needs to be transformed into ...

javascriptsorting

Is it feasible to alter cookie data within a jQuery ajax call?

I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...

javascriptjqueryhttpcookiesgoogle-chrome-extension

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

After receiving a JSON Array as a response Object from my Java application, I aim to extract each object and display it on the corresponding HTML page using TypeScript in Angular. list-user.component.ts import { HttpClient } from '@angular/common/h ...

javahtmlangulartypescriptjsonobjectrequest

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

Having trouble accessing the values of $scope properties after a successful $http post in index.html file. Here is the code snippet for reference, any help in resolving this issue would be greatly appreciated as I am new to AngularJs var app = angular.m ...

javascriptangularjsangularjs-scope

tips on setting the time format in dimple.js

Trying to create a multi-line graph using dimple.js based on some sample code. I have flattened my JSON into an array and thought I had the code down, but I'm stuck. I am including these 2 libraries (using cloudflare dimple for security reasons): &l ...

javascriptjsond3.jsdimple.js

What is the best method for distributing this array object?

I am faced with the task of spreading the following object: const info = [{ name: 'John', address: 'america', gender: 'Male', job: 'SE' }]; I want to spread this array object and achieve the following format: form:{ ...

javascriptreactjsspread

JavaScript completely transforms the HTML code for each element in an array

I'm having trouble adjusting the inner HTML of specific "div" elements using JavaScript. When I try to change the HTML of a single element in an array, it ends up changing all elements instead. let div_length = 2; const divs = new Array(div_length).f ...

javascriptarrays

Transmit specific elements from an array to another array exclusively with Javascript

I have some data stored in a JSON array like this: source=[{"OperationName":"All","PrivilegeName":"Roles CRUD"}, {"OperationName":"Read","PrivilegeName":"Roles Read Delete"}, {"OperationName":"Delete","PrivilegeName":"Roles Read Delete"}, ...

javascriptjqueryarraysjsonajax

What is the best way to interact with my component in React?

As a newcomer to Reactjs, I have a question regarding my current setup: The components in my project include navComponent.js, stackComponent.js, and nav.js I am trying to pass data from stackComponent.js to navComponent.js so that the nav.js data can be ...

javascriptreactjs

What is the best way to align a TabPanel component at the center using React Material UI

As I attempt to compile a list of articles while switching to a list of other entities in React + material UI, I have encountered some difficulties. Specifically, I am struggling to center the Card displaying an article in alignment with the centered Tabs. ...

javascriptreactjsmaterial-ui

Issue: "The argument provided must be a specific string, not a string or an array of strings."

Currently, I am tackling a Vue project that incorporates TypeScript and axios for handling API requests. While working on the Reset Password component, the resetPassword function within the auth.ts file appears as follows: resetPassword(password1: string, ...

typescriptvue.jsquery-string

What is the process for verifying the password field in bootstrap?

In my asp.net project using bootstrap, I have implemented password field validation. When the user clicks on the password field, an information box is displayed. <div id="pswd_info"> <h4>Password requirements:</h4> <ul> ...

javascriptjqueryasp.nettwitter-bootstrappasswords

Mastering the Art of Disabling buttons in Vue Based on Conditions

In my current project, I'm attempting to compare specific values of an initial object with an updated object in order to disable a button if they are the same. However, despite making changes, the button remains disabled: setDisabled() { return th ...

javascriptvue.jsecmascript-6vuejs2vue-component

Retrieve data that resets to undefined upon reloading from an array

Encountering an unusual error while working with TypeScript for the first time. Initially, when I use console.log(data), it displays an array with objects. However, upon reloading the webpage without making any changes, the console log shows undefined. con ...

javascriptreactjstypescript