How to use the ol/proj.transform function in ol

let pointClusterObj =
      new Date(date) > new Date(selectedDate)
        ? firstClusterObj
        : secondClusterObj;
    if (index !== 0) {
      let prevCoordinates = clusters[index - 1].geometry.coordinates;
      let nextCoordinates = clusterPoint.geometry.coordinates;

      // polar projections require transform of coordinates to crs
      if (proj.selected.id !== 'geographic') {
        prevCoordinates = olProj.transform(
          prevCoordinates,
          'EPSG:4326',
          proj.selected.crs
        );
        nextCoordinates = olProj.transform(
          nextCoordinates,
          'EPSG:4326',
          proj.selected.crs
        );
      }

      let lineSegmentArray = [prevCoordinates, nextCoordinates];
      let arrowOverlay = createArrows(lineSegmentArray, map);
      overlays.push(arrowOverlay);
      trackArray.push(lineSegmentArray);
      addOverlayIfIsVisible(map, arrowOverlay);
    }
    if (clusterPoint.properties.cluster) {
      point = getClusterPointEl(
        proj,
        clusterPoint,

draw.on("drawend", function(e) {
      // Disable zooming when drawing
      this.controlDoubleClickZoom(false);
      const lonlat = olproj.transform(e.feature.getGeometry().getCoordinates(), this.props.state.projection, "EPSG:4326");
      // Draw point on map(s)
      this.props.action("add", "point", [[lonlat[1], lonlat[0]]]);
      this.props.updateState("plotEnabled", true);
      // Pass point to PointWindow
      this.props.action("point", lonlat);   //This function has the sole responsibility for opening the point window
      this.map.removeInteraction(draw);
      this._drawing = false;
      setTimeout(
        function() { this.controlDoubleClickZoom(true); }.bind(this),
        251
      );
    }.bind(this));
    this.map.addInteraction(draw);

beforeAll(() => {
        testDiv = window.document.createElement("div");
        testDiv.setAttribute("id", "map");
        testDiv.style.styleFloat = "left";
        testDiv.style.marginLeft = "8px";
        testDiv.style.marginTop = "50px";
        testDiv.style.width = "500px";
        testDiv.style.height = "400px";
        window.document.body.appendChild(testDiv);
        map = new Map({
            target: 'map',
            view: new View({
                center: olProj.transform([116.42, 39.88], 'EPSG:4326', 'EPSG:3857'),
                zoom: 12,
                projection: 'EPSG:3857'
            })
        });
        var e = {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [0, 0]
            },
            "properties": {
                "id": 1
            }
        };
        mockServer.on('connection', socket => {
            socket.on('message', () => {

addFeatures(dataSource: FeatureDataSource) {
    const feature1 = new olFeature({
      name: 'feature1',
      geometry: new olLineString([
        olproj.transform([-72, 47.8], 'EPSG:4326', 'EPSG:3857'),
        olproj.transform([-73.5, 47.4], 'EPSG:4326', 'EPSG:3857'),
        olproj.transform([-72.4, 48.6], 'EPSG:4326', 'EPSG:3857')
      ]),
    });

    const feature2 = new olFeature({
      name: 'feature2',
      geometry: new olPoint(
        olproj.transform([-73, 46.6], 'EPSG:4326', 'EPSG:3857')
      ),
    });

    const feature3 = new olFeature({
      name: 'feature3',
      geometry: new olPolygon([
        [
          olproj.transform([-71, 46.8], 'EPSG:4326', 'EPSG:3857'),
          olproj.transform([-73, 47], 'EPSG:4326', 'EPSG:3857'),
          olproj.transform([-71.2, 46.6], 'EPSG:4326', 'EPSG:3857')
        ]
      ]),
    });

    dataSource.ol.addFeatures([feature1, feature2, feature3]);
  }

setDefaults() {
        const x = getParameterByName('x');
        const y = getParameterByName('y');
        const zoom = getParameterByName('zoom');
        if (zoom) {
            this.view.setZoom(zoom);
        }
        if (x && y) {
            const coordinate = transform([x, y], dotaProj, pixelProj);
            if (containsXY([-100, -100, mapConstants.map_w + 100, mapConstants.map_h + 100], coordinate[0], coordinate[1])) {
                this.panTo(coordinate);
            }
        }

        this.root.getElementById('btn-ward').setAttribute('ward-type', 'observer');
        const mode = getParameterByName('mode');
        this.controls.menu.changeMode(mode);

        const baseLayerName = getParameterByName('BaseLayer');
        let element;
        if (baseLayerName) {
            element = this.root.querySelector(`input[name="base-layer"][value="${baseLayerName}"]`);
            if (element) {
                element.checked = true;
                this.baseLayers.filter(layer => layer.get('layerId') == baseLayerName)[0].setVisible(true);

getCenter(): LngLatArray | undefined {
    if (this._olView) {
      const center = this._olView.getCenter();
      if (center) {
        const transformedCenter = transform(center, this.displayProjection, this.lonlatProjection);
        return transformedCenter as [number, number];
      }
    }
  }

case "tile-pixels":
                    units = getUnitOfMeasure(UnitOfMeasure.Pixels).abbreviation(locale);
                    break;
                case "m":
                    units = getUnitOfMeasure(UnitOfMeasure.Meters).abbreviation(locale);
                    break;
                case "ft":
                case "us-ft":
                    units = getUnitOfMeasure(UnitOfMeasure.Feet).abbreviation(locale);
                    break;
            }
        }
        let coords: Coordinate2D = [mouse[0], mouse[1]];
        if (projection && mapProjection) {
            try {
                coords = olProj.transform(coords, mapProjection, projection) as Coordinate2D;
            } catch (e) {

            }
        }
        return ;
    } else {
        return <div>;
    }
};
</div>

this.map.on("moveend", function() {
      const c = olproj.transform(this.mapView.getCenter(), this.props.state.projection, "EPSG:4326").map(function(c) {return c.toFixed(4);});
      this.props.updateState("center", c);
      this.props.updateState("zoom", this.mapView.getZoom());
      const extent = this.mapView.calculateExtent(this.map.getSize());
      this.props.updateState("extent", extent);
      this.map.render();
      if (this.props.partner) {
        this.props.partner.mapView.setCenter(this.mapView.getCenter());
        this.props.partner.mapView.setZoom(this.mapView.getZoom());
      }
    }.bind(this));

ol_InseeGrid.prototype.getGridAtCoordinate = function (coord, proj) {
  var c = ol_proj_transform(coord, proj||'EPSG:3857', 'EPSG:3035')
  var s = this.get('size');
  var x = Math.floor(c[0]/s) * s;
  var y = Math.floor(c[1]/s) * s;
  var geom = new ol_geom_Polygon([[[x,y],[x+s,y],[x+s,y+s],[x,y+s],[x,y]]]);
  geom.transform('EPSG:3035', proj||'EPSG:3857');
  return geom;
};

getCurrentExtent() {
                var b = OlMap.map.getView().calculateExtent(OlMap.map.getSize());
                var pair1 = [b[0], b[1]]
                var pair2 = [b[2], b[3]];
                var cur_proj = OlMap.map.getView().getProjection().getCode();
                pair1 = transform(pair1, cur_proj, 'EPSG:4326');
                pair2 = transform(pair2, cur_proj, 'EPSG:4326');
                return [pair1[0].toFixed(2), pair1[1].toFixed(2), pair2[0].toFixed(2), pair2[1].toFixed(2)];
            },
            resetCompoData() {