Transpiling Typescript to JavaScript

Introduction

Before we jump into the heart of this topic, we need to understand what transpiling means. Transpiling refers to the process of converting code from one language (in this case, TypeScript) to another (JavaScript). This is necessary because while TypeScript provides many benefits such as static typing, classes, and interfaces, it’s not a language that browsers can understand. Transpiling enables us to write our code in TypeScript and then convert it to JavaScript, which browsers can process.

Setting up TypeScript

Before we can transpile TypeScript to JavaScript, we need to make sure we have TypeScript installed. We can check this by running the following command in our terminal:

tsc -v

If TypeScript is installed, this command will return the version you have installed. If it's not, you can install it globally on your machine using npm (Node Package Manager) with the following command:

npm install -g typescript

Creating a TypeScript File

Now, let's create a simple TypeScript file that we'll transpile to JavaScript. Create a new file in your project directory called greeter.ts and add the following code to it:

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

let user = "TypeScript User";
console.log(greeter(user));

Transpiling TypeScript to JavaScript

Once we've created our TypeScript file, we can transpile it to JavaScript using the TypeScript compiler, tsc. In your terminal, run the following command:

tsc greeter.ts

This command will create a new file in your project directory called greeter.js. This is the JavaScript version of your TypeScript file. If you open greeter.js, you'll see that the TypeScript compiler has removed the type annotation from the greeter function:

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

var user = "TypeScript User";
console.log(greeter(user));

Configuring TypeScript Compiler with tsconfig.json

When working with larger TypeScript projects, we can use a tsconfig.json file to specify root files and compiler options. This will allow us to transpile all of our TypeScript files at once, rather than one at a time.

Let's create a tsconfig.json file in our project directory with the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./built"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

The compilerOptions property contains settings specific to our project. The target property sets the JavaScript version that we're compiling our TypeScript to. The module property sets the module system for our project. The strict property enables a wide range of type checking behavior to make sure our TypeScript code is as explicit as possible. The outDir property specifies where to put our compiled JavaScript files.

The include and exclude properties specify which files the compiler should include and exclude when compiling our TypeScript.

Now, we can run the tsc command in our terminal without specifying any files:

tsc

This will compile all the TypeScript files in our project according to the configuration in our tsconfig.json file.

Conclusion

And that's it! You've just transpiled TypeScript to JavaScript. Now you can start leveraging the power of TypeScript while still ensuring your code runs in any JavaScript environment. Don't hesitate to dive deeper into the TypeScript documentation to understand more about the various compiler options and how you can fine-tune your TypeScript projects. Happy coding!