Draw a trend line with canvas in TypeScript

Question

So i have made a code that is trying to draw a Trend Line from importeted data from AWS TimeStream.

`interface DataPoint {
  x: number;
  y: number;
}

const data: DataPoint[] = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
  { x: 3, y: 6 },
  { x: 4, y: 8 },
  { x: 5, y: 10 },
];

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

const options = {
  backgroundColor: 'white',
  lineColor: 'blue',
  pointColor: 'blue',
  pointRadius: 5,
  lineWidth: 3,
  data: data,
  xMin: 0,
  xMax: 6,
  yMin: 0,
  yMax: 12,
};

function drawLine(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

function drawPoint(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, color: string) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

function drawAxes(ctx: CanvasRenderingContext2D, xMin: number, xMax: number, yMin: number, yMax: number) {
  const axisWidth = 2;
  const tickSize = 5;

  // draw x-axis
  drawLine(ctx, 0, yMax, canvas.width, yMax);
  for (let x = xMin; x <= xMax; x++) {
    const xPos = ((x - xMin) / (xMax - xMin)) * canvas.width;
    drawLine(ctx, xPos, yMax - tickSize, xPos, yMax + tickSize);
    ctx.fillText(x.toString(), xPos, yMax + tickSize + axisWidth + 3);
  }

  // draw y-axis
  drawLine(ctx, 0, 0, 0, canvas.height);
  for (let y = yMin; y <= yMax; y++) {
    const yPos = canvas.height - ((y - yMin) / (yMax - yMin)) * canvas.height;
    drawLine(ctx, -tickSize, yPos, tickSize, yPos);
    ctx.fillText(y.toString(), -tickSize - axisWidth, yPos);
  }
}

function drawChart(ctx: CanvasRenderingContext2D, options: any) {
  const { data, xMin, xMax, yMin, yMax, lineWidth, lineColor, pointRadius, pointColor } = options;

  // draw axes
  drawAxes(ctx, xMin, xMax, yMin, yMax);

  // draw line
  ctx.strokeStyle = lineColor;
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  data.forEach((point, i) => {
    const x = ((point.x - xMin) / (xMax - xMin)) * canvas.width;
    const y = canvas.height - ((point.y - yMin) / (yMax - yMin)) * canvas.height;
    if (i === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  ctx.stroke
// Draw x and y axis labels
ctx.fillStyle = "#000000";
ctx.font = "14px Arial";
ctx.fillText("Time", chartWidth / 2, chartHeight - 10);
ctx.save();
ctx.rotate(-Math.PI / 2);
ctx.fillText("Value", -chartHeight / 2, 20);
ctx.restore();
`. 

I get the message back that the Parameter 'pont' implicity has an 'any type and that the parameter 'i' has the same

In the code at the top i have

import { DateTime, Interval } from 'luxon'
// import { Layout, Legend, PlotData } from 'plotly.js'
import { ChartOptions, Point } from 'chart.js'
import Plotter from '../chartjs'
import {
  DataDuration,
  DataResolution,
  energyGraphData,
  ETData,
  GraphData,
  ReportFrequency,
  Sensor,
  Site,
  TimestreamData,
} from '../../types'
import { timestreamQueryClient } from '../libs/timestreamQueryClient'
import {
  EosTagKey,
  FieldAndTagValue,
  MetField,
  MetTagKey,
} from '../timestream/types.graphql'
import regression from 'regression'
import { map, xor } from 'lodash'

I also get Duplicate identifier 'ctx'.

On the "interface DataPoint {" I get Unexpected token. A constructor, method, accessor, or property was expected.