Comparing JS and TS

index.html:<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<meta name="viewpoint" content="width=device-width",
initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Understanding TypeScript</title>
<script src="JS-only.js" defer></script>
</head><body> <input type="number" id="num1" placeholder="Number 1" />
<input type="number" id="num2" placeholder="Number 2" />
<button>Add</button>
</body></html>
JS-only.js://gather around the elements you need to operate on themconst button = document.querySelector('button')
const input1 = document.getElementById('num1')
const input2 = document.getElementById('num2')
//function the simply addsfunction add(num1, num2) {
return num1 + num2
}
//add an event listener to the button and listen for a click actionbutton.addEventListener("click", function () {
console.log(add(input1.value, input2.value));
});
Two Inputs and a Button that is labeled Add!
  1. In your Terminal type: npm install -g typescript
  2. Now make a file using the .ts extension: using-ts.ts
  3. Copy the original js-only.js file over to the using-ts.ts file
  4. Let’s take a look at what the code editor doesn’t like together =>
using-ts.ts
using-ts.ts — AFTER js-only.js file is deleted or commented out
adding a plus sign to inputs
  • non-JS features like interfaces or generics
  • next generation JS features (compiled down for older browsers)
  • meta programming features like decorators and more!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store