'number' 类型的参数不能使用 ParseInt 分配给'string' 类型的参数

Question

I have a function that calculates a lighter/darker color by hex.

On my localhost it runs just fine.. but when I try to build in Angular I get the error:

ERROR in src/app/requests.service.ts:1611:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1611  R = parseInt(R * (100 + percent) / 100);

src/app/requests.service.ts:1612:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1612  G = parseInt(G * (100 + percent) / 100);

src/app/requests.service.ts:1613:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1613  B = parseInt(B * (100 + percent) / 100);

Here is my code:

  adjust(color, percent) {
  
   var R = parseInt(color.substring(1,3),16);
   var G = parseInt(color.substring(3,5),16);
   var B = parseInt(color.substring(5,7),16);

   R = parseInt(R * (100 + percent) / 100);
   G = parseInt(G * (100 + percent) / 100);
   B = parseInt(B * (100 + percent) / 100);

   R = (R<255)?R:255;
   G = (G<255)?G:255;
   B = (B<255)?B:255;

   var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
   var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
   var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

   return "#"+RR+GG+BB;
}

I'm calling the function using:

 adjust("#345678", -70)

I also tried defining the function parameters like this:

adjust(color:string, percent:number) {

but it wasn't successful.

Any ideas would be great. Thank you!

Answer 1

I check your code. The method of parseInt in typescript use is like this.

parseInt(string)

So I change your function like this. You can see below.

function adjust(color:string, percent:number) {
  
  var R = parseInt(color.substring(1,3),16);
  var G = parseInt(color.substring(3,5),16);
  var B = parseInt(color.substring(5,7),16);

  R = parseInt(R * (100 + percent) / 100 + '');
  G = parseInt(G * (100 + percent) / 100 + '');
  B = parseInt(B * (100 + percent) / 100 + '');

  R = (R<255)?R:255;
  G = (G<255)?G:255;
  B = (B<255)?B:255;

  var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
  var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
  var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

  return "#"+RR+GG+BB;
}

Answer 2

I ended up figuring out where the issue was.. here is the code that worked:

adjust(color, percent) {

   var R = parseInt(color.substring(1,3),16);
   var G = parseInt(color.substring(3,5),16);
   var B = parseInt(color.substring(5,7),16);

   R = Math.floor(R * (100 + percent) / 100);
   G = Math.floor(G * (100 + percent) / 100);
   B = Math.floor(B * (100 + percent) / 100);

   R = (R<255)?R:255;
   G = (G<255)?G:255;
   B = (B<255)?B:255;

   var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
   var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
   var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

   return "#"+RR+GG+BB;
}

I had to change the second row of parseInt s to Math.floor .