SpeedoThreeSixty Blog

My first site. I’m a nerd. Also, please, PLEASE tell me you’re not a dumb idiot that can’t socially interact!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I’m glad you are here. I plan to talk about my Discord and Hypixel.

Posts

May 27, 2021
My Sister Is Gay—And It's Perfectly Normal!
May 6, 2021
How to Gamble Food
May 2, 2021
MyLabel: ...JavaScript.skills.flat(Infinity)
May 1, 2021
JavaScript Basics
Apr 24, 2021
false && console.log('JavaScript Short-Circuiting')
Apr 23, 2021
(JavaScript++ && ++JavaScript) && console.log('Solved')
Apr 22, 2021
Using the Internet without Power
Apr 16, 2021
How to Make a Blog with GitHub Pages
Apr 2, 2021
Remembering Morse Code
Mar 28, 2021
Stop Using InnerHTML with User Input
Stop Using InnerHTML with User Input
Mar 19, 2021
Using the A Minecraft Struggle API
Mar 13, 2021
Guide to Discord, Pt. 1
Feb 27, 2021
JavaScript Nullish Coalescing

Feb 21, 2021

TypeScript Type Annotations

In TypeScript, type annotations allow you to force anything’s data type to be what you choose. If its data type is not the one you specify, the console will throw an error.

Example

Here’s an example:

function remainder(dividend: number, divisor: number) {
    return dividend % divisor;
}
const variableOne = ["Hello", "World"];
const variableTwo = [12, "Hello World"];
const variableThree = [5, 2];
const remainderOne = remainder(variableOne[0], variableOne[1]);
const remainderTwo = remainder(variableTwo[0], variableTwo[1]);
const remainderThree = remainder(variableThree[0], variableThree[1]);
const results = [remainderOne, remainderTwo, remainderThree];
for (const result of results) {
    if (isNaN(result)) {
        continue;
    }
    console.log(result);
}

The console should output something like this:

TypeError: Argument of type 'string' is not assignable to parameter of type 'number'.
TypeError: Argument of type 'string | number' is not assignable to parameter of type 'number'. 
TypeError: Type 'string' is not assignable to type 'number'.

Pros and Cons

Pros

Ensures that you get the data type you want
Short
Easy to understand
Provides a nice interface in IDEs
Cons
Throws an error if it gets a different data type

Continues code execution

Caveats

If the data type is not the one you specify, TypeScript will throw an error. To handle this, you can use a try/catch:

function remainder(dividend: number, divisor: number) {
  return dividend % divisor;
}
try {
  const result = remainder("Some Random Text", 123);
  console.log(`The result is ${result}.`);
} catch {
  console.error("Wrong data type.");
}

Even if the data type is not the one you specify, the code will continue to execute. To handle this, you can use typeof:

function remainder(dividend: number, divisor: number) {
  if (typeof dividend === 'number' || typeof divisor === 'number') {
      const response = dividend % divisor;
      /* if (!Number.isNaN(response)) */ return response;
  }
}
try {
  const result = remainder("Some Random Text", 123);
  console.log(`The result is ${result}.`);
} catch {
  console.error("Wrong data type.");
}

Feb 21, 2021
Simplify Your JavaScript Code
Jul 31, 2020
Welcome to my blog!

Posts

Stop Using InnerHTML with User Input

TypeScript Type Annotations

Example

Pros and Cons

Pros

Cons

Caveats

Stop Using `InnerHTML` with User Input