Converting TypeScript to JavaScript: A Comprehensive Guide with Real-World Examples

Introduction:

TypeScript has become a favorite among developers due to its strict typing, advanced features, and support for large-scale projects. However, sometimes there's a need to convert TypeScript to JavaScript, especially when working with teams or projects that don’t require the TypeScript layer. In this blog, we’ll dive deep into how to convert TypeScript to JavaScript, the reasons behind it, and explore practical, real-world examples to help make this transition seamless.

Why Convert TypeScript to JavaScript?

Before jumping into the process, it's essential to understand why you might want to convert from TypeScript to JavaScript:

• Project requirements: Some teams or projects prefer vanilla JavaScript due to simplicity or compatibility.
• Browser Support: TypeScript files need to be transpiled to JavaScript before browsers can run them.
• Maintenance: For legacy projects, maintaining pure JavaScript might be easier than introducing TypeScript.

Step-by-Step Process of Converting TypeScript to JavaScript

1. Removing Type Annotations

The first step in converting TypeScript to JavaScript is to remove type annotations like string, number, or any. JavaScript doesn't need explicit types, so cleaning these up is the simplest task.

Example:

TypeScript:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

JavaScript:

function greet(name) {
  return `Hello, ${name}!`;
}

This involves stripping out the : string type annotations, leaving you with pure JavaScript.

2. Handling Interfaces and Types

TypeScript interfaces or type definitions are used for type safety but aren't necessary in JavaScript. You'll need to delete these from the code.

Example:

TypeScript:

interface User {
  name: string;
  age: number;
}

const user: User = { name: "John", age: 30 };

JavaScript:

const user = { name: "John", age: 30 };

In JavaScript, the structure is inferred at runtime, so you don't need the interface definition.

3. Managing Enums

Enums in TypeScript are also a feature that JavaScript doesn’t have natively. You can convert enums to an object representation or just use constant variables.

Example:

TypeScript:

enum Status {
  Active,
  Inactive,
  Pending
}

JavaScript:

const Status = {
  Active: 0,
  Inactive: 1,
  Pending: 2
};

This approach mimics the enum behavior using JavaScript objects.

4. Removing Access Modifiers

TypeScript allows you to define access modifiers (private, public, protected). These are specific to TypeScript and don't exist in JavaScript, so you can simply remove them.

TypeScript:

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public makeSound() {
    return `${this.name} is making a sound!`;
  }
}

JavaScript:

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    return `${this.name} is making a sound!`;
  }
}

Just eliminate the private and public keywords, and you’ve got valid JavaScript.

5. Handling Generics

TypeScript's generics are designed to provide type flexibility, but JavaScript handles these naturally with its dynamic typing system. When converting, you can safely remove generic definitions.

TypeScript:

function getItems<T>(items: T[]): T[] {
  return new Array<T>().concat(items);
}

JavaScript:

function getItems(items) {
  return [].concat(items);
}

Generics are no longer needed since JavaScript arrays can hold any type.

Real-World Scenario: Converting a TypeScript-Based Web App

Imagine you're working on a small web app built with TypeScript that needs to be converted to JavaScript due to client requirements. Let’s say the app uses TypeScript’s strong typing and interfaces to structure user input handling.

Original TypeScript Code:

interface Product {
  id: number;
  name: string;
  price: number;
}

function displayProduct(product: Product): string {
  return `Product: ${product.name} costs $${product.price}`;
}

JavaScript Conversion:

Remove the interface and let JavaScript handle types dynamically.

function displayProduct(product) {
  return `Product: ${product.name} costs $${product.price}`;
}

In the above example, the business logic remains the same, but without TypeScript’s type constraints, making it more flexible for quick iterations.

Automated Conversion: Using TypeScript Compiler to Output JavaScript

To automate the conversion process, you can leverage the TypeScript compiler (tsc) to transpile TypeScript to JavaScript. Here's a quick guide:

Install TypeScript globally:

npm install -g typescript

Transpile TypeScript to JavaScript:

tsc example.ts

This command will generate a .js file from your .ts file, automatically removing TypeScript-specific syntax and converting the code into standard JavaScript.

Conclusion:

Converting TypeScript to JavaScript can seem like a daunting task at first, but it’s really about removing TypeScript-specific features while preserving core JavaScript functionality. Whether it's for project compatibility, performance reasons, or maintenance, knowing how to effectively transform TypeScript into JavaScript can be a valuable skill.

By following the steps outlined in this guide, you can easily convert your TypeScript code into JavaScript, maintaining code integrity while removing unnecessary type constraints. Use this as a handy reference whenever you need to switch between the two languages.