A few weeks ago, when I was working on CRUD operations for the SharePoint list items in an SPFx webpart, I faced a TypeScript error.
Type ‘string’ is not assignable to type ‘number’
At first, it was a little confusing to understand why this error was appearing, even though the code seemed correct. After analysing the issue, I realised it was related to the type mismatch in TypeScript.
In this article, I will explain how to fix the Type ‘string’ is not assignable to type ‘number’ in SPFx.
Error: Type ‘string’ is not assignable to type ‘number’
TypeScript is a strongly typed language that helps developers identify issues during development. The error below usually occurs when we try to assign or pass a string value to a variable or parameter that expects a number.
Argument of type ‘string | number | string[]’ is not assignable to parameter of type ‘number’.
type ‘string’ is not assignable to type ‘number’Let’s look at the code I wrote in my SPFx webpart. Here, I was trying to delete an item from a SharePoint list using the PnP JS library:
web.lists.getByTitle("ProjectDetails")
.items
.getById($('input[name="itemID"]:checked').val())
.delete();Here:
- The getById() method expects a number as an argument (the list item ID).
- But the val() method from jQuery returns it as a string.
So, TypeScript throws the error because it does not allow a string value where a number is required.
Fix: Type ‘string’ is not assignable to type ‘number’
To fix this issue, we need to convert the string value to a number before passing it to the getById() method. By using the Number() function in TypeScript, we can easily convert.
let id: number = Number($('input[name="itemID"]:checked').val());
await web.lists.getByTitle("ProjectDetails").items.getById(id).delete();Now, the value returned from Number() is explicitly converted into a number before being used. This ensures that the data type matches what the method expects, and the error is resolved.
Note: If the value might not always be a valid number, you can add a small validation check as shown below.
let idValue = $('input[name="itemID"]:checked').val();
let id = Number(idValue);
if (!isNaN(id)) {
await web.lists.getByTitle("ProjectDetails").items.getById(id).delete();
} else {
console.log("Invalid item ID value.");
}This makes the code safer, especially when handling the inputs. Here, the isNaN() function returns true if the provided ID is not a number. Otherwise false.
- For example, in the code below, we passed the number 10 as a string so that the Number function would convert it to a number. Since it is a number, !isNaN() returns true, and the code in the true condition will be executed.
let id:number=Number('10')- But in the section below, a person’s name is present in the Number function, so it can’t convert it to a number. !isNaN() returns false, so it displays the error message.
let id:number=Number('Bijay')So this way, if you’re confident that the input field will always return a valid number, you can safely convert the value from a string to a number. However, if there’s any uncertainty about the type of input, it’s good to include an if-else condition to verify whether the value is actually a number before using it.
You can also follow the same approach for the following errors:
- error ts2345 argument of type ‘string number’ is not assignable to parameter of type ‘number’
- error ts2345 argument of type ‘string number’ is not assignable to parameter of type ‘string’
- argument of type ‘string number’ is not assignable
- error ts2345 argument of type ‘string’ is not assignable to parameter of type ‘never’
- error ts2345 argument of type ‘string’ is not assignable to parameter of type
- Argument of type ‘string | number | string[]’ is not assignable to parameter of type ‘number’
I hope you found this article helpful!, Here, I have explained why the ‘Type ‘string’ is not assignable to type ‘number’ error occurs and how to fix it with a simple example. Follow this article if you’re also facing the same type script type mismatch errors.
Also, you may like:
- Error TS2307 Cannot find module @pnp/sp/presets/all in SPFx
- SPFx – Bind dropdown list from SharePoint list using PnP
- SPFx Error: Couldn’t add this app. Check your network connection and try again
- Display SharePoint List Items in a SPFX Web Part
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
