What is TypeScript and how is it different from JavaScript?

TypeScript is a superset of JavaScript that combines the flexibility and dynamism of JavaScript with the benefits of a type system, including static type checking, improved tooling, and better code organization. It is developed and maintained by Microsoft, and the language’s syntax and features are designed to be compatible with modern JavaScript standards, including ECMAScript 2015 (ES6) and beyond.

The main difference between TypeScript and JavaScript is that TypeScript introduces static typing to help catch type-related errors during development, while JavaScript is a dynamically typed language. This enables better code analysis, refactoring support, and autocompletion while writing code. TypeScript also includes support for interfaces, abstract classes, and other advanced object-oriented features.

Here’s a comparison between TypeScript and JavaScript code to demonstrate some differences:

JavaScript:

function greet(person) {
  return "Hello, " + person;
}

const user1 = "Jane User";
const user2 = [0, 2, 4];

console.log(greet(user1)); // Hello, Jane User
console.log(greet(user2)); // Hello, 0,2,4 (unexpected behavior)

TypeScript:

function greet(person: string): string {
  return "Hello, " + person;
}

const user1 = "Jane User";
const user2 = [0, 2, 4]; // TypeScript will show an error here

console.log(greet(user1));
console.log(greet(user2)); // TypeScript will show an error here, preventing unexpected behavior

In this example, the TypeScript code introduces a type annotation for the ‘person‘ parameter in the ‘greet‘ function, ensuring that only string values are accepted. This helps prevent unexpected behavior during runtime.

Here is a summarized comparison table between TypeScript and JavaScript features:

| Feature                 | TypeScript                    | JavaScript                   |
|---------------|----------------|----------------|
| Typing                  | Static (Optional)                    | Dynamic                      |
| Type inference          | Yes                                   | Yes                          |
| User-defined type guards| Yes                                   | N/A                          |
| Interfaces              | Yes                                   | N/A                          |
| Enums                   | Yes                                   | N/A                          |
| Namespaces              | Yes                                   | N/A                          |
| Abstract classes        | Yes                                   | N/A                          |
| Optional chaining       | Yes (ECMAScript optional with Babel) | Yes (ECMAScript 2020)       |
| Nullish coalescing      | Yes (ECMAScript optional with Babel) | Yes (ECMAScript 2020)       |

In summary, TypeScript is an extension of JavaScript that adds optional static typing to the language, enabling better tooling, code organization, and error prevention. Developers can leverage TypeScript’s features to write more robust and maintainable codebases while still targeting standard JavaScript when compiling.