TypeScript is a programming language created by Microsoft that builds on JavaScript. Think of TypeScript as JavaScript with extra features that help catch mistakes before your program runs.

Imagine you're building a house. JavaScript is like building with just your hands and basic tools. TypeScript gives you a blueprint, measuring tape, and safety equipment. The house (your program) will be stronger and have fewer problems.

The most important feature TypeScript adds is types. Types tell the computer what kind of data you're working with. For example, a number, some text, or a list of items.

🚀 Why Should We Use TypeScript?

Let's look at some key benefits:

  1. Catches Errors Early: TypeScript checks your code as you write it. This means you find mistakes right away, not when your program is running.
  2. Better Code Completion: Your code editor can give better suggestions when you're typing because it knows what types of data you're working with.
  3. Easier to Understand Code: When you or other developers read the code later, it's clearer what each part does because the types explain the purpose.
  4. Safer Changes: When you need to change your code, TypeScript helps make sure you don't break something by accident.

Here's a simple example showing how TypeScript helps:

// JavaScript - No warning about the mistake
function addNumbers(a, b) {
  return a + b;
}

// Returns "5hello" instead of a proper sum
addNumbers(5, "hello"); 



// TypeScript - Catches the mistake
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Error: Argument of type 'string' is not assignable to parameter of type 'number'
addNumbers(5, "hello");

💻 Creating Your First TypeScript Program

Let's create a simple program to make sure everything is working:

  1. Create a new folder for your project
  2. Open VS Code and open that folder
  3. Create a new file called hello.ts (the .ts extension is for TypeScript files)
  4. Type the following code below and save the file.
function greet(name: string): string {
    return "Hello, " + name + "!";
}

let userName: string = "World";
console.log(greet(userName));

🔄 Compiling Your TypeScript Code

TypeScript code needs to be converted (compiled) to JavaScript before it can run. This process is called transpilation.

To compile your code:

  1. Open your command line
  2. Navigate to your project folder
  3. Run command tsc hello.ts, This creates a new file called hello.js in the same folder. This is the JavaScript version of your TypeScript code.
  4. To run your program, type node hello.js, You should see Hello, World! printed in your command line.

⚙️ TypeScript Compiler Configuration

For larger projects, typing tsc for each file becomes tedious. TypeScript uses a configuration file called tsconfig.json to control how it compiles your code.

Let's create a basic configuration:

  1. In your project folder, run tsc — init.
  2. This creates a tsconfig.json file with default settings.
  3. Now you can compile all TypeScript files in your project by simply typing tsc

⚔️ TypeScript vs JavaScript: Key Differences

TypeScript and JavaScript differ in several important ways, despite TypeScript being a superset of JavaScript. Here's a detailed comparison of their key differences:

  1. Types System: JavaScript uses dynamic typing (determined at runtime); TypeScript uses static typing (checked during compilation), which catches errors earlier.
  2. Error Detection: JavaScript finds most errors during runtime; TypeScript catches many errors during development through its compiler.
  3. IDE Support: TypeScript provides better code editor features like autocompletion and real-time error checking compared to JavaScript.
  4. Code Clarity: TypeScript code is more self-documenting through type annotations, making it easier to understand and maintain large codebases.
  5. Compilation: JavaScript runs directly in browsers; TypeScript needs compilation to JavaScript first.
  6. Learning Curve: JavaScript is easier to start with; TypeScript requires understanding additional type-related concepts.
  7. Browser Support: JavaScript works directly in all browsers; TypeScript must be compiled to JavaScript first.
  8. Large Projects: TypeScript generally scales better for large applications and team development due to its type safety features.

✏️ Try It Yourself: A Simple Exercise

Let's practice with a small exercise:

  1. Create a new file called calculator.ts
  2. Write a TypeScript program that defines functions for adding, subtracting, multiplying, and dividing two numbers
  3. Make sure to add proper type annotations
  4. Call each function with test values and print the results

Here's a starting point:

// Your task: Complete these functions with proper TypeScript types

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

function subtract(a, b) {
    return a - b;
}

// Add multiply and divide functions

// Test your functions
console.log("Addition: " + add(10, 5));

📚 Conclusion

In this module, we've explored the fundamentals of TypeScript and how it differs from JavaScript. We've learned that TypeScript adds a powerful type system on top of JavaScript, helping us catch errors early and write more maintainable code.

TypeScript provides numerous advantages, particularly for larger projects and team development, while requiring a bit more initial learning investment. The online TypeScript Playground (https://www.typescriptlang.org/play/) offers an excellent way to start experimenting with TypeScript without any installation, making it perfect for beginners.

By understanding the key differences between TypeScript and JavaScript, you now have a solid foundation to build upon as you continue your TypeScript journey. In the next module, we'll dive deeper into TypeScript's type system and explore how to work with different data types. 🚀

🔍 Looking for More Programming Tutorials?

If you're interested in exploring other programming languages and frameworks, please visit my profile! There you'll find comprehensive tutorials on:

  • Python 🐍
  • Laravel 🌐
  • Golang 🦫
  • JavaScript 📱
  • And many more! 💻

All tutorials are available in English and designed for learners at all levels. Happy coding!

Thank you for being a part of the community

Before you go: