Unable to integrate React Typescript with asp.net signalR using 'ms-signalr-client'

I am trying to connect asp.net signalR from my react-typescript client. Here is my code.

api.ts:

Approach-1: Installing npm install -d @aspnet/signalr and npm install @microsoft/signalr

import * as signalR  from 'ms-signalr-client';
////import * as signalR from '@microsoft/signalr';

export const connect  = async () =>{
  try{
    const connection = new 
   signalR.HubConnectionBuilder().withUrl("http://localhost:14000/signalr").build();
   connection.serverTimeoutInMilliseconds = 300000;

  await connection.start();

  return connection;
  }catch(err)
  {
    console.error(err);
  }
  return '';
}

I am getting an exception as - TypeError: signalR.HubConnectionBuilder is not a constructor

Approach-2: Installing 'ms-signalr-client' and Jquery

import $ = require("jquery");
import * as signalR  from 'ms-signalr-client';
export const connect = async () =>{
  try{
    console.log('api.ts');
    const connection = (<IJQueryStatic>$).signalR.connection("http://localhost:14000/signalr");
    const hubProxy = (<IJQueryStatic>$).signalR.createHubProxy("myHub");
    hubProxy.on('SubscribeEvent', data => {
          console.log(data);
        });
     connection.start({ jsonp: true})
     .done(() => {console.log('Now connected, connection ID= '+ (<IJQueryStatic>$).signalR.hub.id);})
     .fail(()=>{ console.log('Could not connect'); })   
  }catch(err)
  {
    console.error(err);
  }
  return '';
}
interface Hub {
  id: string;
  state: any;
  start(options?: any, callback?: () => any): JQueryPromise<any>;
}

interface SignalR {    
  log(msg: string, logging: boolean): void;
  isCrossDomain(url: string): boolean;
  changeState(connection: any, expectedState: number, newState: number): boolean;
  isDisconnecting(connection: any): boolean;

  hub: Hub;
  //connection: HubConnection;
  connection: (url: string) => HubConnection;
  createHubProxy(hubName: string): signalR.Proxy;

  init(url, qs, logging): void;
  ajaxDataType: string;
  logging: boolean;
  reconnectDelay: number;
  state: any;
  start(options?: any, callback?: () => any): JQueryPromise<any>;
  starting(callback?: () => any): SignalR;
  send (data): SignalR;
  sending (callback?: () => any): SignalR;
  received (callback?: (data) => any): SignalR;
  stateChanged (callback?: (data) => any): SignalR;
  error (callback?: (data) => any): SignalR;
  disconnected (callback?: () => any): SignalR;
  reconnected (callback?: () => any): SignalR;
  stop (async? : boolean): SignalR;
}

interface HubConnection extends SignalR {
  hub: Hub;
}

Error: Cannot read property 'connection' of undefined from this line: const connection = ($).signalR.connection("http://localhost:14000/signalr");

Approach-3:

export const connect = async () =>{
  try{
    console.log('api.ts');
    alert($().jquery);
    const connection = (<signalRhubConnection>$).hubConnection("http://localhost:14000/signalr");
    const hubProxy = connection.createHubProxy("myHub");
    hubProxy.on('SubscribeEvent', data => {
          console.log(data);
        });
     connection.start({ jsonp: true})
     .done(() => {console.log('Now connected, connection ID= '+ connection.id);})
     .fail(()=>{ console.log('Could not connect'); })   
  }catch(err)
  {
    console.error(err);
  }
  return '';
}

interface signalRhubConnection extends JQueryStatic {
  connection: (url: string) =>  signalR.HubConnection
}

Compile time error: Property 'hubConnection' does not exist on type 'signalRhubConnection'. const connection = ($).hubConnection("http://localhost:14000/signalr");

I am really breaking my sweat to resolve this problem. Please help me with the possible solution. Thanks.