
###

```Javascript
if (window.Worker) {
    const myWorker = new Worker("/js/worker/worker.js");

    var ga = window.ga;

    myWorker.postMessage([ga, document.querySelector("button").textContent]);

    myWorker.onmessage = function(e) {
        console.info('main.js', e);
    }
}
```

```Javascript
// able to load console at worker thread
console.info('worker');

// can't access document
try {
    var getButtonText = self.document.querySelector("button").textContent;
} catch (error) {
    console.error(error);
}

// can't access main thread's window object
try {
    var x = self.window.ga;
} catch (error) {
    console.error(error);
}

onmessage = function(e) {
    console.info(e);
}
```

```HTML
  <script src="js/worker/main.js"></script>
```

```Javascript

fetch('js/worker.js')
.then(res => res.blob())
.then(blob => {

    var blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);

    var worker = new Worker(blobUrl);

});
```

- https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API#worker_global_contexts_and_functions
- https://web.dev/learn/performance/web-worker-demo
- https://web.dev/articles/workers-basics#:~:text=You%20can%20load%20external%20script,with%20the%20importScripts()%20function.
- https://partytown.builder.io/partytown-scripts


Get Start with Web Worker


#### Table of Contents

1. Introduction
2. Install Packages
3. Create babel.config.js
4. Create jest.config.ts
5. Change the Code sample.js to TypeScript sample.ts
6. Change the Jest sample.test.js to TypeScript sample.test.ts
7. Run npm run test

### Introduction

This blog shows how to get start use TypeScript to write code and also write in Jest.

### Install Packages

If you have not use Jest, can reference this to get start with Jest with JavaScript, [Get Start with Jest](/blog/post/start-setup-jest).

At here, we'll start install necessary NPM packages for use TypeScript at Jest and the code.

```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @jest/globals @types/jest babel-jest ts-jest ts-node typescript
```

### Create `babel.config.js`

```JavaScript
module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };
```

### Create `jest.config.ts`

```JavaScript
export default {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage"
}
```

### Change the Code `sample.js` to TypeScript `sample.ts`

### Change the Jest `sample.test.js` to TypeScript `sample.test.ts`

```JavaScript
import {exponent, subtraction, sum} from '../src/sample';
import {describe, expect, test} from '@jest/globals';

describe('calculator', () => {
    test('test sum', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('test subtraction', () => {
        expect(subtraction(10, 2)).toBe(8);
    });

    test('test exponent', () => {
        expect(exponent(5, 2)).toBe(25);
    });
})
```

### Run `npm run test`

Now, if run `npm run test` and if everything works, should see test all passed and 100% coverage.


This blog shows how to get start use TypeScript to write code and also write in Jest.

Javascript

Get Start with Web Worker

How to use TypeScript with Jest