Typescript Type 'number' is not assignable │ to type 'string'

Viewed 266 times

I am currently knee deep in making a currency formatter directive for an Angular 4 app. on the parse strip out everything other than the numbers and the decimal and end up with a stringified float, but I need it to return as a float so I can do math with it.

parse(value: string, fractionSize: number = 2): number {
  let val = value.replace(/([^0-9.])+/ig, '');
  let [ integer, fraction = "" ] = (val || "").split(this.DECIMAL_SEPARATOR);
  integer = integer.replace(new RegExp(this.THOUSANDS_SEPARATOR, "g"), "");
  fraction = parseInt(fraction, 10) > 0 && fractionSize > 0
    ? this.DECIMAL_SEPARATOR + (fraction + PADDING).substring(0, fractionSize)
    : "";
  let result = `${integer}${fraction}`;
  // at this point result = "100.55";
  result = parseFloat(result); // this refuses to compile saying "Type 'number' is not assignable │ to type 'string'"
  return result;
}

Answers

The two lines:

let result = `${integer}${fraction}`;
result = parseFloat(result);

are the problem. Typescript is pretty good about infering the type of a variable when it's not explicitly declared. In this case, because you assign a string to the result, typescript infers it's type as a string. To fix this, you have two options. First, explicitly declare the type of that variable so that it allows both strings and numbers:

let result: string|number = `${integer}${fraction}`;
result = parseFloat(result); // now should be ok.

Or you can assign the parsed number to a new variable, instead of reusing the result variable:

let result = `${integer}${fraction}`;
let numberResult = parseFloat(result); // now should be ok.

Saturday, September 3, 2022

iegik

Remove "type": "module" from package.json

https://github.com/TypeStrong/ts-node/issues/935

Monday, October 10, 2022

vinicius_garcia

This thread pointed me in the right direction, as I have to add the types to the tsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "types": ["node", "mocha", "chai"],
    ...
}

The types option also have a verbose documentation.

Saturday, November 12, 2022

roy_folkker

The compiler doesn't know too much about the inner workings of localStorage.getItem and doesn't make the assumption that the return value will be the same from one call of getItem to the next. So it just tells you that it can't be certain that on the second call to getItem the result isn't null.

Try simply passing in the variable you've already created instead of reading from localStorage again:

if (typeof storedPortfolio === 'string') {
  moonPortfolio = JSON.parse(storedPortfolio);
}

Wednesday, December 14, 2022

vlad_valceanu

It looks like Grid accepts not any number, but a restricted set of numbers called GridSpacing. See the type declaration 1 and 2. So after converting to a number as you did, you'll need to cast that number to a GridSpacing:

<Grid container className={classes.demo} justify="center" spacing={Number(spacing) as GridSpacing}>

And add to your imports:

import { GridSpacing } from '@material-ui/core/Grid';

Sunday, December 4, 2022

essam_mohamed_fahmi

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

angularjs

node.js

typescript

types

Typescript Type 'number' is not assignable │ to type 'string'

Answers

angularjs,node.js,typescript,types