A Simple Introduction to Typescript for JavaScript Dev

As a JavaScript developer, you may have heard of TypeScript and are wondering what it is and how it differs from JavaScript. In this article, I will introduce TypeScript to JavaScript developers and provide examples to demonstrate its usefulness and differences from JavaScript.

What is TypeScript?

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. However, TypeScript adds additional features to JavaScript, including optional static typing and class-based object-oriented programming.

Below 👇👇 is a diagrammatic explaination of typescript.

Why is TypeScript useful?

One of the main benefits of using TypeScript is that it allows developers to catch errors and bugs in their code at compile-time, rather than runtime. This can save a lot of time and effort in debugging and testing the code.

For example, consider the following JavaScript code:

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("1", 2)); // "12"

In this code, the add function expects two numbers as arguments and returns their sum. However, the second call to add passes a string and a number as arguments, and the result is a string concatenation instead of a sum. This error will only be caught at runtime, when the code is executed.

Now consider the following TypeScript code:

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("1", 2)); // Error: Argument of type '"1"' is not assignable to parameter of type 'number'.

In this code, we have added type annotations to the arguments and return value of the addfunction. This tells the TypeScript compiler that the add function expects two numbers as arguments and returns a number. When we try to pass a string and a number as arguments, the TypeScript compiler will catch the error and show a clear error message, allowing us to fix the error before the code is even executed.

TypeScript also makes it easier to write large and complex applications by helping developers to structure and organize their code more effectively. Its static typing system also enables better code completion and refactoring support in IDEs, making it easier for developers to write and maintain their code.

How does TypeScript differ from JavaScript?

As mentioned earlier, TypeScript is a strict syntactical superset of JavaScript, which means that it includes all the features of JavaScript and more. However, there are some key differences between the two languages:

• Static typing: TypeScript introduces static typing, which means that developers can specify the type of a variable or function parameter. This can help to catch errors and bugs in the code at compile-time.

• Classes and interfaces: TypeScript also supports class-based object-oriented programming, with the ability to define classes and interfaces. This can make it easier to organize and structure the code.

• Decorators: TypeScript includes a feature called decorators, which are functions that can be applied to classes, properties, and methods to modify their behavior.

Conclusion

In conclusion, TypeScript is a powerful and useful language for JavaScript developers looking to improve the quality and maintainability of their code. Its static typing and class-based object-oriented programming features make it a great choice for large and complex applications, and its strict syntactical superset of JavaScript means that it is easy to learn for those familiar with the language. If you are a JavaScript developer looking to take your skills to the next level, kindly follow me to receive more content on typescript because I will be dropping a lot of content about typescript.

 Thanks 👍 for reading