Pixel Smile in VS Code

Language Help Codecademy
1

I completed the pixel smile project in the codecademy typescript course but I copied the same code to vs code and get an error message? Works fine in the codecademy editor got the desired output.
Code in VS Code

// create the image data
const imageWidth = 20
const imageHeight = 8
const imageData = createImageData()

// draw head
drawRectangle(0, 0, 20, 8)
// eyes
drawDot(7, 2)
drawDot(12, 2)
// smile
drawDot(4, 4)
drawHorizontalLine(4, 5, 12)
drawDot(15, 4)

// output what we drew to the console
outputImage()

function drawRectangle(x: number, y: number, width: number, height: number) {
  // top
  drawHorizontalLine(x, y, width)
  // bottom
  drawHorizontalLine(x, y + height - 1, width)
  // left
  drawVerticalLine(x, y, height)
  // right
  drawVerticalLine(x + width - 1, y, height)
}

/**
 * Gets if the provided point is in the image.
 * @param x - The horizontal position within
 * the image.
 * @param y - The vertical position within
 * the image.
 */

function isPointInImage(x: number, y: number) {
  return x >= 0 && x < imageWidth && y >= 0 && y < imageHeight
}

/**
 * Outputs the image data state to the console.
 * @param onChar - Character to render an
 * "on" pixel with.
 * @param offChar - Character to render an
 * "off" pixel with.
 */
function outputImage(onChar = "X", offChar = " ") {
  let text = ""

  for (let i = 0; i < imageData.length; i++) {
    if (i > 0 && i % imageWidth === 0) {
      text += "\n" // new line
    }

    text += imageData[i] ? onChar : offChar
  }

  console.log(text)
}

function createImageData(): boolean[] {
  // create array of size `length` containing `false` values
  const length = imageWidth * imageHeight
  return new Array(length).fill(false)
}

function drawDot(x: number, y: number) {
  if (isPointInImage(x, y)) {
    imageData[y * imageWidth + x] = true
  }
}
function drawHorizontalLine(x: number, y: number, length: number) {
  for (let i = 0; i < length; i++) {
    drawDot(x + i, y)
  }
}

function drawVerticalLine(x: number, y: number, length: number) {
  for (let i = 0; i < length; i++) {
    drawDot(x, i + y)
  }
}

Error in VSCode
03:39:02 [email protected] Pixel_Smile ±|pixel ✗|→ tsc index.ts
index.ts:66:28 - error TS2550: Property ‘fill’ does not exist on type ‘any’. Do you need to change your target library? Try changing the ‘lib’ compiler option to ‘es2015’ or later.

66 return new Array(length).fill(false)
~~~~
Found 1 error in index.ts:66

2

Remember that in the Codecademy editor there’s a reference to the tsconfig.json file with all the execution parameters.
If you are running the program locally, you should have a similar file in your local folder so that it executes properly.

1 Like
3

Hello, I had the same issue but can’t access to the lib parameter in the target library because the exercise does not allow you, so I just reimplement the code to work on previous version of JavaScript.

function createImageData(): boolean[] {
  // create array of size `length` containing `false` values
  const length = imageWidth * imageHeight;
  const imageData = new Array(length);
for (var i = 0; i < length; i++) {
  imageData[i] = false;
}

return imageData;
}

I hope this helps if somebody else is stuck.