Email - harun.bspt2014@gmail.com Phone - +8801717615827

JS to TypeScript

Normally, we can put normal JS code and get no help from what TypeScript has to offer. In order to TS to force us to actually type our code, we need to change the ‘tsconfig.json’ file. In particular, we will focus on two compiler options that will force our code to be actually typed:

"noImplicitAny": true,
"strictNullChecks": true,

Let’s imagine we have a simple mortgage simulator that tells the user if, given his financial situation, a mortgage is viable or not. For that, we will have a function that will retrieve somehow the savings user has:

function getSavings() {
  //returns savings
}

// And a function to decide if a mortgage is feasible:

function concedeMortgage(homeValue) {
  const savings = getSavings()
  return savings / homeValue > 0.2
}

But, to make it actually work, we would need to check if the input exists. And also if it’s a number or not. The same applies for the return value from getSavings, since he don’t know what is the return type of that function. Therefore, our code could end up looking something like this:

function concedeMortgage(homeValue) {
  if (!homeValue || !parseFloat(homeValue)) return false
  const savings = getSavings()
  if (!savings || !parseFloat(savings)) return false
  return savings / homeValue > 0.2
}

Which looks quite terrible.

But, if we activate the noImplicitAny compiler option, it would be no longer necessary to check if the input value and the return from getSavings are of type of number, so the function could look something like this:

function concedeMortgage(homeValue: number): boolean {
  if (!homeValue) return false
  const savings = getSavings()
  if (!savings) return false
  return savings / homeValue > 0.2
}

Which is an improvement, since the compiler would help us to avoid some mistakes and typos, not allowing us calling the function with a string, per example:

concedeMortgage("foo") // ERROR! Argument of type 'foo' is not assignable to parameter type 'number'

Unfortunately, null and undefined are still in the domain of every type, therefore it would be possible to do this:

concedeMortgage(null) // Still works

To fix that, we need activate the other option in the tsconfig.json file we mentioned: ‘strictNullChecks’.

Now, doing the call to the function with null, would end up caught by the compiler:

concedeMortgage(null) // ERROR! Argument of type 'null' is not assignable to parameter of type 'number'

That meaning, the check of null values is not needed by code, simplifying the logic to something like:

function concedeMortgage(homeValue: number): boolean {
  const savings = getSavings()
  return savings / homeValue > 0.2
}

This is just a small glance at what TypeScript can give you if you migrate your project from plain JS to it.

Further Reading

https://apiumhub.com/tech-blog-barcelona/migrate-javascript-to-typescript/

Dr. Harun
Dr. Harun

Dr. Md. Harun Ar Rashid, MPH, MD, PhD, is a highly respected medical specialist celebrated for his exceptional clinical expertise and unwavering commitment to patient care. With advanced qualifications including MPH, MD, and PhD, he integrates cutting-edge research with a compassionate approach to medicine, ensuring that every patient receives personalized and effective treatment. His extensive training and hands-on experience enable him to diagnose complex conditions accurately and develop innovative treatment strategies tailored to individual needs. In addition to his clinical practice, Dr. Harun Ar Rashid is dedicated to medical education and research, writing and inventory creative thinking, innovative idea, critical care managementing make in his community to outreach, often participating in initiatives that promote health awareness and advance medical knowledge. His career is a testament to the high standards represented by his credentials, and he continues to contribute significantly to his field, driving improvements in both patient outcomes and healthcare practices.

Translate »
Register New Account