angular

How to fix error TS1251: Function declarations are not allowed inside blocks in strict mode when targeting 'ES3' or 'ES5'.?


I am having a code and getting the following error:

error TS1251: Function declarations are not allowed inside blocks in strict mode when targeting 'ES3' or 'ES5'. Class definitions are automatically in strict mode.

The code:

 lineDraw(){
  flag = true;    
  var point1, isDown, x1, y1, x2, y2, x, y;
  var count = 0;
  if (canvas != undefined) {
    canvas.on('mouse:down', function (options) {
      if (!mouseEvent){
        count = 0;
        drawFlag = true;
        mouseEvent = true;
        //point1 = undefined;
        x = undefined;
        y = undefined;
      }
      if (flag) {
        getMouse(options);
      }
    });
      function getMouse(options) {
        var coords = {"x":{}, "y": {}};
        var coords1 = {"x":{}, "y": {}};
        let canvasElem = document.querySelector("canvas");
        var bounds = canvasElem.getBoundingClientRect();
        x = (options.e.clientX - bounds.left);
        y = (options.e.clientY - bounds.top);
        x /= bounds.width;
        y /= bounds.height;
        x *= canvas.width;
        y *= canvas.height;
        if (point1 === undefined) {
          point1 = new fabric.Point(x, y)
        } else {
          var line = new fabric.Line([point1.x, point1.y, x, y], {
            fill: 'red',
            stroke: 'red',
            strokeWidth: 5,
            selectable: false,
            evented: false,
            objectCaching: false
          });
          canvas.add(line);
          coords.x = parseFloat((point1.x / scaledWidth).toFixed(2));
          coords.y = parseFloat((point1.y / scaledHeight).toFixed(2));
          //coords.push((point1.x / (scaledWidth)).toFixed(2));
          //coords.push((point1.y / scaledHeight).toFixed(2));
          if (count == 0) {
            myObj.points['point' + count] = (coords);
            count = count + 1;
          }
          //console.log(y, scaledHeight);
          coords1.x=parseFloat((x / scaledWidth).toFixed(2));
          coords1.y=parseFloat((y / scaledHeight).toFixed(2));
          myObj.points['point' + count] = coords1;
          count = count + 1;
          console.log('added', point1.x / scaledWidth, point1.y / scaledHeight, x / scaledWidth, y / scaledHeight)
          point1.x = x;
          point1.y = y;
          canvas.setActiveObject(line);
        }
      }
    }
    else {
      this._snackBar.open('Load Image first before drawing', 'Close', {
        duration: 5000,
      });
    }
  }

I am trying to access this function and getting this error.


Solution

  • Take out your getMouse function outside of if block

    so your will look like this

    lineDraw() {
      flag = true;
      var point1, isDown, x1, y1, x2, y2, x, y;
      var count = 0;
      if (canvas != undefined) {
        canvas.on('mouse:down', function(options) {
          if (!mouseEvent) {
            count = 0;
            drawFlag = true;
            mouseEvent = true;
            //point1 = undefined;
            x = undefined;
            y = undefined;
          }
          if (flag) {
            this.getMouse(options, point1);
          }
        });
    
      } else {
        this._snackBar.open('Load Image first before drawing', 'Close', {
          duration: 5000,
        });
      }
    }
    
    getMouse(options, point1) {
      var coords = {
        "x": {},
        "y": {}
      };
      var coords1 = {
        "x": {},
        "y": {}
      };
      let canvasElem = document.querySelector("canvas");
      var bounds = canvasElem.getBoundingClientRect();
      x = (options.e.clientX - bounds.left);
      y = (options.e.clientY - bounds.top);
      x /= bounds.width;
      y /= bounds.height;
      x *= canvas.width;
      y *= canvas.height;
      if (point1 === undefined) {
        point1 = new fabric.Point(x, y)
      } else {
        var line = new fabric.Line([point1.x, point1.y, x, y], {
          fill: 'red',
          stroke: 'red',
          strokeWidth: 5,
          selectable: false,
          evented: false,
          objectCaching: false
        });
        canvas.add(line);
        coords.x = parseFloat((point1.x / scaledWidth).toFixed(2));
        coords.y = parseFloat((point1.y / scaledHeight).toFixed(2));
        //coords.push((point1.x / (scaledWidth)).toFixed(2));
        //coords.push((point1.y / scaledHeight).toFixed(2));
        if (count == 0) {
          myObj.points['point' + count] = (coords);
          count = count + 1;
        }
        //console.log(y, scaledHeight);
        coords1.x = parseFloat((x / scaledWidth).toFixed(2));
        coords1.y = parseFloat((y / scaledHeight).toFixed(2));
        myObj.points['point' + count] = coords1;
        count = count + 1;
        console.log('added', point1.x / scaledWidth, point1.y / scaledHeight, x / scaledWidth, y / scaledHeight)
        point1.x = x;
        point1.y = y;
        canvas.setActiveObject(line);
      }
    }

    JavaScript does not have block scoping, it has only function scope. So, it does not matter if you write function definition inside if block or not, it is available throughout the enclosing function block.

    Thus typescript throws that error, as it might give ambiguous meaning to reader that function is only available within if block