How to enable harp engine in TypeScript Project for HERE Maps API for JS 3.1

After following the basic setup guide from the link - https://docs.here.com/maps-api-for-js/docs/typescript

There are following 2 ways to enable the harp engine:

1) Via custom declaration:

* In your tsconfig.json, modify as per below :

{
  "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node"
  },
  "include": [
    "./src/here-maps.d.ts" // Path to your custom declaration file
  ]
}

* Add below code in your here-maps.d.ts

declare module '@here/maps-api-for-javascript/bin/mapsjs.bundle.harp.js';

* And finally in your index.ts, import the harp bundle like :

import H from '@here/maps-api-for-javascript/bin/mapsjs.bundle.harp.js';

* Please find attached the full snippet, for simplicity your index.ts would resemble like :

// Import the HERE Maps API for JavaScript library

import H from '@here/maps-api-for-javascript/bin/mapsjs.bundle.harp.js';


// Function to dynamically load the HERE Maps UI CSS
function loadHereMapsStylesheet(): void {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://js.api.here.com/v3/3.1/mapsjs-ui.css';
    document.head.appendChild(link);
}

// Call the function to load the stylesheet
loadHereMapsStylesheet();

// Create default map layers using the HERE Maps platform
const platform = new H.service.Platform({
    apikey: "",
});

const engineType = H.Map.EngineType['HARP'];
const defaultLayers = platform.createDefaultLayers(
  {
    engineType: engineType
  }
);

// Step 3: initialize the map
const map = new H.Map(
  document.getElementById('map') as HTMLElement, // Type assertion for the HTMLElement
  defaultLayers.vector.normal.map,
  {
    center: { lat: 47.056, lng: 2.350 },
    engineType: engineType,
    zoom: 6
  }
);

// Step 4: enable map events
const behavior = new H.mapevents.Behavior(
  new H.mapevents.MapEvents(map)
);
const ui = H.ui.UI.createDefault(map, defaultLayers);
// Step 5: create default UI components
const customControl = new H.ui.Control();
ui.addControl('customControl', customControl);


// Window resize handler
window.addEventListener('resize', () => {
    map.getViewPort().resize();
});

2. Another method is by adding "typeRoots" property to tsconfig.json:

* To import the alternative bundle with Harp engine, you should use in your "index.ts" file:

import "@here/maps-api-for-javascript/bin/mapsjs.bundle.harp";

* Add "typeRoots" property to tsconfig.json

{
  "compilerOptions": {
      "typeRoots": ["./node_modules/@here/maps-api-for-javascript"]
  }
}