0

So I am trying to create a dragbar for resizing containers.

var handler = document.querySelector('.handler') as HTMLElement;
var wrapper = handler!.closest('.wrapper') as HTMLElement;
var boxA = wrapper!.querySelector('.box') as HTMLElement;
var isHandlerDragging = false;
document.addEventListener('mousedown', function(e) {
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  if (!isHandlerDragging) {
    return false;
  }
  var containerOffsetLeft = wrapper!.offsetLeft;
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;  
  boxA!.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
  boxA!.style.flexGrow = 0;   //Type 'number' is not assignable to type 'string'.ts(2322)

How can I declare boxA, so that it is of type number?

I am new to typescript so any suggestions are very much appreciated.

Tallion 22
  • 141
  • 1
  • 11

1 Answers1

1

You don't want to change boxA's type. The error it's saying that the property flexGrow of boxA!.style is a string, but you're trying to assign a number to it.

So instead try:

boxA!.style.flexGrow = "0";

Also, you don't really need to use the non-null-assertion operator, the ! operator. Since you've already asserted that boxA is an HTMLElement, Typescript knows that it has a style property.

So, in the end you can write it like this:

boxA.style.flexGrow = "0";
Matías Santurio
  • 189
  • 2
  • 9
  • I am trying to change boxA's type to integer, cause if I do ```boxA.style.flexGrow = "0";``` that removes the error but the code doesn't work as intended. I am trying to replicate the most upvoted answer of this question https://stackoverflow.com/questions/46931103/making-a-dragbar-to-resize-divs-inside-css-grids – Tallion 22 Jul 31 '22 at 01:50
  • @Tallion22 How exactly does it not work as expected? I tried it here https://jsfiddle.net/2urn3cx0/16/ – Matías Santurio Jul 31 '22 at 02:00
  • For some reason it's not working in my vue application. I'll try to debug it. Thank you for the answer. – Tallion 22 Jul 31 '22 at 03:07
  • 1
    @Tallion22 I have no experience with Vue whatsoever, but you can open a new question with the related details and hopefully someone can help you! – Matías Santurio Jul 31 '22 at 04:47