Why TypeScript is the better JavaScript
Tags: typescript, javascript, webdev, programming
Published: 2023-05-07 18:45:07

JavaScript is a powerful and widely used programming language for web applications. However, it can sometimes lead to unexpected results and errors due to its dynamic type system. In this blog post, we'll examine some of the most common errors that arise in JavaScript, and explore how [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript, can help prevent these issues with improved type safety and error handling.
<!--more-->
## Common JavaScript Errors

JavaScript is a beginner-friendly language due to its minimal setup requirements. However, the language's limited syntax and dynamic typing often lead to errors, making it challenging for even those who are familiar with the language.

Here are a few common errors when working with JavaScript:

**Unexpected string concatenation:** Mixing numbers and strings can lead to undesired results, such as `console.log(10 + '100')` outputting `10100` instead of the expected `110`.

**Stringified object concatenation:** Using an object as an argument will result in a stringified version of the object combined with the other argument, e.g., `console.log({} + '10')` returns `[object Object]10`.

**TypeError:** Accessing properties of an object that are undefined or calling a non-function will trigger a `TypeError`, such as `caught TypeError: Cannot read properties of undefined (reading 'data')` when calling `console.log({}.input.data)`.

**NaN:** Forgetting to pass an argument results in a non-existent number, commonly referred to as `NaN` for "Not a Number". Example: `console.log(parseInt())` 

**ReferenceError:** Using an undeclared variable results in a `ReferenceError`, such as `console.log(10 + abc)`.

**Not defined functions:** Calling functions that don't exist will also throw a `ReferenceError`. Example: `console.log(abc())` 

## TypeScript to the Rescue

TypeScript is a programming language developed and maintained by Microsoft that adds type safety to JavaScript. By using TypeScript, you can catch errors during design time (when writing code) rather than at runtime. This will help you catching common JavaScript errors before they appear in production. TypeScript code is compiled (or transpiled) to JavaScript, ensuring compatibility with web applications.

## Why Use TypeScript?

TypeScript offers several benefits, including:

1. Strong type checking to catch errors before runtime
1. [Code autocompletion](https://code.visualstudio.com/docs/editor/intellisense) in your IDE for a smoother coding experience
1. Fundamental linting rules, including detection of unused variables and parameters
1. Const assertions to avoid side effects in functional programming
1. Class decorators to facilitate dependency injection
1. Inherent support for [JSX](https://facebook.github.io/jsx/) in the language itself
1. Downleveling to convert modern JavaScript to earlier versions of JavaScript
1. Compatibility with various module systems, such as [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) and [ECMAScript modules](https://nodejs.org/api/esm.html#modules-ecmascript-modules) (ESM)
1. Customizable output formatting options, including end-of-line sequence formatting
1. Support for polymorphism via class inheritance and interfaces in object-oriented programming

## Getting Started with TypeScript

As an experienced TypeScript contributor, I've spent years working with the language and have encountered its various challenges. That's why I've created a [**free TypeScript video tutorials**](https://www.youtube.com/playlist?list=PLCbdBdyNHZXL3grXeUPZwTn1lo7pVaUdH), designed to help you master the latest version and enhance your coding skills. This series focuses on the fundamentals of TypeScript, ensuring you not only grasp how things work, but also why they work the way they do.

This knowledge can be a valuable asset as you progress from a junior to a senior programmer, and can even assist you in tackling difficult questions during job interviews. The best part? This entire tutorial series is **available at no cost**, so tune in and enjoy your journey towards TypeScript mastery.

{% youtube zpphULkLr3Y %}