CODEWITHSUNDEEP
angular
aakriti priya
aakriti priya

Reputation: 119

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.

Upvotes: 5

Views: 10082

Answers (2)

Nidža
Nidža

Reputation: 71

When targeting ES3 or ES5 with TypeScript compiler option strict mode on, you cannot declare a named function inside a nested block. If it is preferable for a function to be inside a block, one can assign it using a block-scoped function expression.

This TypeScript will fail with TS1251 under the described conditions:

if (true) {

    function f(): void {}

    f();
}

This TypeScript is legal:

if (true) {

    const f = function (): void {};

    f();
}

Upvotes: 7

Kiran Shinde
Kiran Shinde

Reputation: 5982

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

Upvotes: 4

Related Questions