Typescript = Javascript with benefits

Hello everyone,hope you are taking good care of yourself in these times and coding everyday.Js is a must learn language when working with web related projects,be it frontend related or just backend.Modern libraries and frameworks use JS and many developers love using it but it doesn't mean we should totally outlook areas where JS is not efficient.Since JS is dynamic typed languages, variables can be abused in the codebase and it will not be known to the program until it is executed, that is during runtime.

Here comes Typescript to save you by throwing errors everytime some types go wrong,don't worry we will look into types more below.

What is Typescript?

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.

Let's first look at the difference between static typed vs dynamic typed language-

Static Type

The language where types of variables are checked during compile time.Here in the code if we defined variable of type string and assign a number later to it,the compiler will show error.
Example - C++,C,Java

Dynamic Type

The language where types are checked at runtime(during execution).
Example:Python,Javascript

Typescript is essentially javascript with static type,which means we won't get the freedom to change variable types without letting typescript know in advance,to understand more what I mean look at the example below.

Why Typescript

To explain why ts ,let's see why not js,we all know javascript is hated for its unexpected behaviour like in the following example:

const addNumber=(someNumber)=>{
 return 1+someNumber;
}
//calling the function with a number 
console.log(addNumber(2));
//calling the function with a string
console.log(addNumber("Aman));

Our plain old javascript will not complain(throw an error) and will show the behavior we all are familiar with,but when working with larger codebase in organisations this behaviour might get caught only during runtime.Now here comes typescript to save us from doing these mistakes by static typing.

How does TS solve this

All valid JavaScript code is also TypeScript code. You might get type-checking errors, but that won't stop you from running the resulting JavaScript. While you can go for stricter behavior, that means you're still in control.

The power of TS comes from defining types.When writing functions we define types of the parameters required,this way ts checks the type of arguements passed matches the type of parameters.

Let's look at the code for the above example in typescript and observe the behaviour

const addNumber = (someNumber:number)=>{
  return 5+someNumber;
}
//will give error saying "Argument of type 'string' is not assignable to parameter of type 'number'"
addNumber("hello");
//will give error saying "Argument of type 'boolean' is not assignable to parameter of type 'number'"
addNumber(true);
//ts happily compiles it,no error
addNumber(5);

Just by writing some types, TS saved our debugging time,this part is super important as when code grows and if we were using js these errors could only get caught in the runtime.

So ok writing types saves us from errors but is there more which ts does?
Added benefits which comes along using ts are:

1.Speeds up development

When used with proper types ts doesn't let us use other types and in a component we don't have to look in the file it was defined to send the props requires as ts will show error id more or less than defined props are send in the component.
Look at the following code:

type ComponentProp = {
  x:string,
  y:number 
}
const Component=(props:ComponentProp)=>{
  return (
    <>
    {/* using the code */}
    </>
  )
}

Now when passing props in this Component in out App.js,it checks and if it doesn't match the ComponentProp types shoes error

export default function App() {
  return (
    <div className="App">
      <Component x={56} /> {/*shows an error saying "Type 'number' is not assignable to type 'string'"*/}
      <Component x={"Aman"}/>{/* shows an error saying "Property 'y' is missing in type '{ x: string; }' but required in type 'ComponentProp'" */}
    </div>
  );
}

This way just looking at the error we know what to pass as props and also with typechecking of ts prevents passing extra or less number of arguements.

2. Refactoring becomes super easy

Now one of the dev from your team decides to refactor a component or a function,she can't just add some parameters on the Component/function and forget to add it in the rest of the codebase as typescript will throw errors guiding her to solve the error with descriptive error messages

3. Provides first layer of documentation

So you wrote code with types with good type names and now whenever some new from another team needs to understand the codebase,she could get the rough idea by looking at the types for the component/function,just that simple.

Conclusion

In my opinion to use TS or to keep using JS in projects is choice which entirely depends on your project,as if you are working solo on a project it is ok to use JS and get your work done with it as chances are it will be you who is going to maintain/refactor the code.When working with teams is when TS can be used along with its superpowers,ofcourse.

Thank you for reading till here,I hope it added value to your learning.Please feel free to comment your thoughts on this blog.

I actively tweet my learning.For more updates follow Aman Sethi