It’s 2023, You Should Be Using Typescript!
Hope everyone is doing well and this New Year 2023 is off to a good start. In this article, we are going to explore why you should be using TypeScript for your projects and not plain old JavaScript.
The last two years or so I have been using TypeScript with most of my client’s projects. This has been a huge time-saver, and I would want the same for you as well! What’s cool about TypeScript is that, once you learn it and use it within a project, you will never go back to your old ways of using plain JavaScript.
If you haven’t heard here is what TypeScript is.
What Exactly is TypeScript?
TypeScript is a strongly typed programming language, that builds on JavaScript, and gives you better tooling. This definition is straight off the TypeScript language website. In simple words:
TypeScript is basically JavaScript code with special syntax for types!
Worry not! TypeScript is not necessarily an entirely different programming language. It simply adds flavor to your JavaScript and helps you write code that is type-safe. End of the day, the TypeScript code converts to JavaScript, and can run anywhere JavaScript runs.
TypeScript files have the extension .ts and the compiler transpiles the TypeScript files to JavaScript.
TypeScript is Getting Popular
The popularity of TypeScript has been increasing steadily over the years, and more professional developers choose TypeScript in their projects over JavaScript. In the StackOverflow Developer Survey of 2022, TypeScript is a close second to Rust and Python, as the most wanted technology of the year!
You can see close to 17% of the developers have voted for TypeScript and say that they want to continue using it. This also means, there are lot of opportunities for you in the job market as a TypeScript developer!
Show Me Some Code!
TypeScript allows you to add “types” to your JavaScript code, so you can write scalable code for large projects, without having to worry about the.
Let’s look at some simple React code, for a Heading component.
The JavaScript version of the component is shown below:
export const Heading = ({ title, bold }) => { return ( <div> {bold ? "Bold Title: " : "Regular Title: "} {title} </div> );
};The same component, when written in TypeScript takes a different turn as shown below. We are now adding types to each prop that has been passed to the Heading component.
type HeadingProps = { title: string; bold: boolean;
} export const Heading = ({ title, bold }: HeadingProps) => { return ( <div> {bold ? "Bold Title: " : "Regular Title: "} {title} </div> );
};In the example above, you can see TypeScript in action. The component Heading accept the props title and bold of type HeadingProps. Anytime we invoke the Heading component we will have to pass to it, all the props with the appropriate types. Your IDE will throw an error, if you either miss a prop or pass a prop of incorrect type as shown below.
You get the idea! It is awesome to get this kind of instant feedback from the IDE, while you are still coding!
Why TypeScript ?
Below is a summary of why TypeScript is preferred these days instead of using plain JavaScript. Let’s touch on each of these points mentioned below:
Catch Problems Early On
With the transition to TypeScript the first thing that you will notice is that you can now catch problems early on. Especially in larger projects, with hundreds of thousands of files, using TypeScript can provide instant feedback and catch problems during the development stages.
The simple code snippet below shows a TypeScript code, that will immediately let you know that there is an error.
let message: string;
message = 123;This code shown above, will immediately display an error on the IDE with the following message:
Type 'number' is not assignable to type 'string'.ts(2322)IntelliSense is Accurate
Modern IDEs like VS Code, provides IntelliSense support. This shows you intelligent code completion, hover information and so on, which helps speed up your coding. With VS Code, it provides IntelliSense for individual TypeScript files and TypeScript projects. This is a huge time saver, and improves developer velocity by heaps and bounds.
Easier to Refactor Code
With TypeScript, you would have guessed it by now, it is much easier to refactor code. A single change to an individual file can sometimes affect several hundreds of other files. If you are using plain JavaScript, refactoring large code bases with several hundred files could soon be a very tedious task with limited validation. But with TypeScript, you validate connections between different parts of your projects automatically, and with instant feedback. As a developer, you will feel confident in your code, and save tons of time, since you do not have to validate that you have accidentally broken something! TypeScript does this work for you instead!
Readable, Maintainable and Testable Code
As a side-effect of all the type safety and catching errors early on, you end up with very readable, maintainable and testable code.
High Quality Documentation (TSDoc)
In TypeScript projects you can generate high quality documentation using TSDoc. Because everything is typed, the documentation is predictable and can be auto-generated.
You can use plugins like ESLint TS Doc, to provide a rule for validating TypeScript doc comments which confirm to the TSDoc specifications.
An example code that generates TS Doc based on the comments would be structured as follows:
/** * Returns the average of two numbers. * * @remarks * This method is part of the {@link core-library#Statistics | Statistics subsystem}. * * @param x - The first input number * @param y - The second input number * @returns The arithmetic mean of `x` and `y` * */
function getAverage(x: number, y: number): number { return (x + y) / 2.0;
}You can try out the TSDoc playground to checkout how TS documentation looks.
Conclusion
Well that is a wrap! I hope you enjoyed this short article on TypeScript. In this blog post, you have learned what TypeScript is, and why you should be learning and using TypeScript in your projects instead of plain JavaScript.
If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates.
Linked below are a few resources to help you get started with TypeScript.
Mosh’s TypeScript Tutorial for Beginners
