Author: John Au-Yeung

Sometimes, we want to add optional function in a TypeScript interface.

In this article, we’ll look at how to add optional function in a TypeScript interface.

How to add optional function in a TypeScript interface?

To add optional function in a TypeScript interface, we add a ? after the function name.

For instance, we write

interface IElement {
  name: string;
  options: any;
  type: string;
  value?: string;
  validation?(any): boolean;
}

to make the validation function optional by putting a ? after the function name.

Conclusion

To add optional function in a TypeScript interface, we add a ? after the function name.

Sometimes, we want to send a JSON to server and retrieving a JSON in return with JavaScript

In this article, we’ll look at how to send a JSON to server and retrieving a JSON in return with JavaScript.

How to send a JSON to server and retrieving a JSON in return with JavaScript?

To send a JSON to server and retrieving a JSON in return with JavaScript, we use fetch.

For instance, we write

const dataToSend = JSON.stringify({
  email: "hey@mail.com",
  password: "101010",
});

const resp = await fetch(url, {
  credentials: "same-origin",
  mode: "same-origin",
  method: "post",
  headers: { "Content-Type": "application/json" },
  body: dataToSend,
});
const dataReceived = await resp.json();

to call fetch to make a post request to the url in an async function.

We call fetch with the headers and body to send the request headers and body.

And then we get the JSON response body from the resp.json method.

Conclusion

To send a JSON to server and retrieving a JSON in return with JavaScript, we use fetch.

Sometimes, we want to access a JavaScript object which has spaces in the object’s key.

In this article, we’ll look at how to access a JavaScript object which has spaces in the object’s key.

How to access a JavaScript object which has spaces in the object’s key?

To access a JavaScript object which has spaces in the object’s key, we use square brackets.

For instance, we write

myTextOptions["character names"].kid;

to get the "character names" property from myTextOptions.

Then we get the kid property from the returned object.

Conclusion

To access a JavaScript object which has spaces in the object’s key, we use square brackets.

Sometimes, we want to compress an image via JavaScript in the browser.

In this article, we’ll look at how to compress an image via JavaScript in the browser.

How to compress an image via JavaScript in the browser?

To compress an image via JavaScript in the browser, we can use the compressorjs library.

To install it, we run

npm i compressorjs

Then we write

import axios from "axios";
import Compressor from "compressorjs";

document.getElementById("file").addEventListener("change", (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  new Compressor(file, {
    quality: 0.6,
    async success(result) {
      const formData = new FormData();
      formData.append("file", result, result.name);
      await axios.post("/path/to/upload", formData);
      console.log("Upload success");
    },
    error(err) {
      console.log(err.message);
    },
  });
});

to select the file input with getElementById.

Then we call addEventListener to listen to the change event.

In the event listener, we get the first selected file with

const file = e.target.files[0];

Then we create a Compressor object with the selected file and then get the compressed file from the success method.

In success, we upload the result with axios.post.

Conclusion

To compress an image via JavaScript in the browser, we can use the compressorjs library.

Sometimes, we want to clear text selection with JavaScript.

In this article, we’ll look at how to clear text selection with JavaScript.

How to clear text selection with JavaScript?

To clear text selection with JavaScript, we can use the empty method.

For instance, we write

window.getSelection().empty();

to call getSelection to get the select text in an object.

Then we call empty to clear the selection.

Conclusion

To clear text selection with JavaScript, we can use the empty method.