Typescriptでのワークの使用

ビジネス要件はフロントエンドにレポートを表示するがsharepoint onlineは直接データベースを使用できず、REST APIをフロントエンドに表示するしかない.
一、組み込みワーク
この方法の利点は、ブラウザが書くworkerをロードするたびに使用しないことです.js

 this.domElement.innerHTML=`
Worker  : 

      Worker 
 
 : 


// worker


var a;
function groupBy(array, f) {
    const groups = {};
    array.forEach(function (o) {
        const group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
    });
    return Object.keys(groups).map(function (group) {
        return groups[group];
    });
  }
addEventListener('message', (message) => {
    var status;
    var st = new Date();
    var xLabel=[],ylabel=[];
        groupBy(message.data,(t)=>{
            return t.country
        }).forEach(function(e){
           xLabel.push(e[0].country);
           var sum=0;
           e.forEach(element => {
               sum+=element.cost;
           });
           ylabel.push(sum);
        })
       
    status = (new Date().getTime() - st.getTime()) + ' ms';
  
 
    postMessage("time :"+status) ;
});
`;

次は新しいworkerで呼び出します.

var blob = new Blob([document.querySelector('#worker1').textContent]);
    const worker = new Worker(window.URL.createObjectURL(blob));
    worker.addEventListener('message', message => {
        document.getElementById('result').innerHTML=message.data;
    });
    this.domElement.getElementsByTagName('button').item(0).addEventListener('click',function(){
      worker.postMessage(c);
    })

二、外部workerを呼び出す.jsファイル
jsファイルの作成

var a;
function groupBy(array, f) {
    debugger;
    const groups = {};
    array.forEach(function (o) {
        const group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
    });
    return Object.keys(groups).map(function (group) {
        return groups[group];
    });
  }
addEventListener('message', (message) => {
    var status;
    var st = new Date();
    var xLabel=[],ylabel=[];
        groupBy(message.data,(t)=>{
            return t.country
        }).forEach(function(e){
           xLabel.push(e[0].country);
           var sum=0;
           e.forEach(element => {
               sum+=element.cost;
           });
           ylabel.push(sum);
        })
       
    status = (new Date().getTime() - st.getTime()) + ' ms';
  
 
    postMessage("time :"+status) ;
});

file-loaderfile-loaderがjsをサーバにロードすることを宣言します.このファイルはfile-loaderです.d.tsファイル、typescriptはこのjsに基づいてコンパイルされます.

declare module "file-loader?name=[name].js!*" {
    const value: string;
    export = value;
}

workerの作成を宣言

import * as workerPath from "file-loader?name=[name].js!./test.worker";
const worker = new Worker(workerPath);

console.log(workerPath, worker);
worker.addEventListener('message', message => {
    console.log(message);
});
worker.postMessage('this is a test message to the worker');