Introduction

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It was developed and is maintained by Microsoft. TypeScript adds optional static types, classes, and interfaces to JavaScript, making it easier to write and maintain large-scale applications.

Key Features of TypeScript

Static Typing: TypeScript introduces static types to JavaScript, allowing developers to define variable types, function return types, and more. This helps catch errors early during development.
Type Inference: TypeScript can automatically infer types based on the values assigned to variables, reducing the need for explicit type annotations.
Modern JavaScript Features: TypeScript supports the latest JavaScript features, including ES6 and beyond, and compiles them down to a version of JavaScript that runs in any browser.
Object-Oriented Programming: TypeScript supports object-oriented programming concepts such as classes, interfaces, and inheritance.
Tooling and IDE Support: TypeScript has excellent tooling support, including autocompletion, navigation, and refactoring in popular IDEs like Visual Studio Code.
Compatibility: TypeScript is fully compatible with existing JavaScript code, libraries, and frameworks.

Why Use TypeScript?

Improved Code Quality: Static typing helps catch errors at compile time, reducing runtime errors and improving code quality.
Enhanced Readability and Maintainability: Type annotations and interfaces make the code more readable and easier to maintain, especially in large codebases.
Better Tooling: TypeScript's integration with IDEs provides features like autocompletion, type checking, and refactoring, which enhance developer productivity.
Scalability: TypeScript's features make it easier to manage and scale large applications.

Practical Example

Let's look at a simple example to understand the difference between JavaScript and TypeScript.

JavaScript Example

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

console.log(add(2, 3)); // 5
console.log(add('2', '3')); // '23'

In the above JavaScript code, the add function can accept any type of arguments, which can lead to unexpected results.

TypeScript Example

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

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

In the TypeScript code, we have added type annotations to the add function. This ensures that only numbers can be passed as arguments, preventing the unexpected behavior seen in the JavaScript example.

Exercise

Task

Convert the following JavaScript function to TypeScript by adding appropriate type annotations.

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

console.log(greet("Alice")); // Hello, Alice
console.log(greet(42)); // Hello, 42

Solution

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

console.log(greet("Alice")); // Hello, Alice
console.log(greet(42)); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

By adding the type annotation string to the name parameter and the return type, we ensure that the greet function only accepts string arguments, preventing potential errors.

Conclusion

In this section, we introduced TypeScript and its key features, explained why it is beneficial to use TypeScript, and provided a practical example to illustrate the differences between JavaScript and TypeScript. Understanding these basics sets the foundation for diving deeper into TypeScript in the upcoming modules.

What is TypeScript?

Introduction

Key Features of TypeScript

Why Use TypeScript?

Practical Example

JavaScript Example

TypeScript Example

Exercise

Task

Solution

Conclusion

TypeScript Course

Module 1: Introduction to TypeScript

Module 2: Working with Types

Module 3: Advanced Types

Module 4: Functions and Modules

Module 5: Asynchronous Programming

Module 6: Tooling and Best Practices

Module 7: Advanced Topics