Bitwise Operators in TypeScript

Generally, as a programmer you do not need to think about operations at the bit level, you are free to think in bytes, but it is occasionally necessary to use bitwise operations. Basically "bitwise operators" are used to manipulate the value of individual bits (ones and zeros) of an operand. The "Bitwise operators" in TypeScript are: "~" , "&, "|", "^" ,"<<" and ">>".

The Bitwise operators are summarized here.

~ (Bitwise Negation) operator

The Bitwise negation operator (~) will invert it's single operand, in other words, the negation operator performs a bitwise complement on its single integer operand.

Initial value1 (A)	Initial value2 (B)	Resulting value1 (~A)	Initial value2 (~B)
0	0	1	1
0	1	1	0
1	0	0	1
1	1	0	0

Example

var a=3
var c=~a;

Then the result in c is -4.

& (Bitwise And) operator

The Bitwise AND (&) operator will return 1 for a bit of both operand bits are equal to "1", otherwise it will return 0 (zero).

Initial value1 (A)	Initial value2 (B)
0	0	0
0	1	0
1	0	0
1	1	1

Example

var a=3,b=4;
var c=a&b;

Then the result in c is 0 because the above example is evaluated that way.

The value of a is 3 (the bits are 0011) and the value of b is 4, in other words, 0100, now 0011 & 0100 is 0.

The result is 0000; in other words, decimal Zero (0).

| (Bitwise OR) operator

The Bitwise OR (|) operator will return a 1-bit if only one bit is equal to "1", otherwise it will return 0 (zero).

Initial value1 (A)	Initial value2 (B)	A\|B
0	0	0
0	1	1
1	0	1
1	1	1

Example

var a=3,b=4;
var c=a|b;

Then the result c is 7 because the above example is evaluated that way.

The value of a is 3 (in bits that is 0011) and the value of b is 4 (0100), now 0011 | 0100 is 7:

The result is 0111, in other words, decimal Seven (7).

^ (Bitwise XOR) operator

The Bitwise XOR (^) operator will return a 1-bit if one bit is equal to "1" and the other bit is 0 (in other words the operands are different), otherwise it will return 0 (zero).

Initial value1 (A)	Initial value2 (B)	A^B
0	0	0
0	1	1
1	0	1
1	1	0

Example

var a=2,b=3;
var c=a^b;

The result c is 1 because the above example is evaluated that way.

The value of a is 2 (0010) and the value of b is 3, in other words, 0011' now 0010 | 0011 is 1:

The result is 0001, in other words, decimal One (1).

<< (Bitwise LeftShift) operator

The Bitwise LeftShift (<<) operator shifts bits from the low bits to the high bits by the specified number of bit positions.

Example

var a=3,b=4;
var c=a<<b;

The result c is 48.

>> (Bitwise RightShift) operator

The Bitwise LeftShift (<<) operator shifts the bits from the high bits to the low bits by the specified number of bit positions.

Example

var a=3,b=4;
var c=a>>b;

The result of c is 0.

The following examples show you how to use bitwise operators in TypeScript. Use the following to create a program using bitwise operators.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application like "BitWiseOperators", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, CSS file, and HTML files.

Step 3

The code of the Bitwise operator's program.

BitWiseOperators .ts

class BitWiseOperators {
MyFunction()
{
var a = 3,
b = 4;
var y = document.createElement("y");
y.style.color = "red";
var c = a & b; //BitWise And operator
y.innerText = "BitWise And operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = a | b; //BitWise OR operator
y.innerText = "BitWise OR operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
y.style.color = "red";
var c = a ^ b; //BitWise XOR operator
y.innerText = "BitWise XOR operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = a << b; //BitWise LeftShift operator
y.innerText = "BitWise LeftShift operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
y.style.color = "red";
var c = a >> b; //BitWise RightShift operator
y.innerText = "BitWise RightShift operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = ~a; //BitWise Negation operator
y.innerText = "BitWise Negation operator res=" + c;
document.body.appendChild(y);
}
}
window.onload = () => {
var call = new BitWiseOperators();
call.MyFunction();
}

default.html

<!DOCTYPEhtml>
<htmllang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title>TypeScript HTML App</title>
<linkrel="stylesheet"href="app.css"type="text/css"/>
<scriptsrc="app.js">
</script>
</head>
<body>
<h1>Bitwise Operators Example</h1>
<divid="content"/>
</body>
</html>

app.js

var BitWiseOperators = (function() {
function BitWiseOperators() {}
BitWiseOperators.prototype.MyFunction = function() {
var a = 3;
var b = 4;
var y = document.createElement("y");
y.style.color = "red";
var c = a & b;
y.innerText = "BitWise And operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = a | b;
y.innerText = "BitWise OR operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
y.style.color = "red";
var c = a ^ b;
y.innerText = "BitWise XOR operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = a << b;
y.innerText = "BitWise LeftShift operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
y.style.color = "red";
var c = a >> b;
y.innerText = "BitWise RightShift operator res=" + c + "\n";
document.body.appendChild(y);
var y = document.createElement("y");
var c = ~a;
y.innerText = "BitWise Negation operator res=" + c;
document.body.appendChild(y);
};
return BitWiseOperators;
})();
window.onload = function() {
var call = new BitWiseOperators();
call.MyFunction();
};

Step 4

Output