Running TypeScript code using transpilation

Transpilation is the process of converting source code from one language to another. In the case of TypeScript, it's the process of converting TypeScript code to JavaScript code. This is necessary because browsers and Node.js don't run TypeScript code directly.

Compiling TypeScript to JavaScript

The most common way to run TypeScript code is to compile it to JavaScript first. You can do this using the TypeScript compiler tsc.

Step 1: Write your TypeScript code in a file, for example example.ts.

type 
type User = {
    name: string;
    age: number;
}User = {
  name: stringname: string;
  age: numberage: number;
};

function function isAdult(user: User): booleanisAdult(user: Useruser: 
type User = {
    name: string;
    age: number;
}User): boolean {
  return user: Useruser.age: numberage >= 18;
}

const 
const justine: {
    name: string;
    age: number;
}justine = {
  name: stringname: 'Justine',
  age: numberage: 23,
} satisfies 
type User = {
    name: string;
    age: number;
}User;

const const isJustineAnAdult: booleanisJustineAnAdult = function isAdult(user: User): booleanisAdult(
const justine: {
    name: string;
    age: number;
}justine);

Step 2: Install TypeScript locally using a package manager:

In this example we're going to use npm, you can check our introduction to the npm package manager for more information.

npm i -D typescript # -D is a shorthand for --save-dev

Step 3: Compile your TypeScript code to JavaScript using the tsc command:

npx tsc example.ts

NOTE: npx is a tool that allows you to run Node.js packages without installing them globally.

tsc is the TypeScript compiler which will take our TypeScript code and compile it to JavaScript. This command will result in a new file named example.js that we can run using Node.js. Now when we know how to compile and run TypeScript code let's see TypeScript bug-preventing capabilities in action!

Step 4: Run your JavaScript code using Node.js:

node example.js

You should see the output of your TypeScript code in the terminal

If there are type errors

If you have type errors in your TypeScript code, the TypeScript compiler will catch them and prevent you from running the code. For example, if you change the age property of justine to a string, TypeScript will throw an error:

We will modify our code like this, to voluntarily introduce a type error:

type 
type User = {
    name: string;
    age: number;
}User = {
  name: stringname: string;
  age: numberage: number;
};

function function isAdult(user: User): booleanisAdult(user: Useruser: 
type User = {
    name: string;
    age: number;
}User): boolean {
  return user: Useruser.age: numberage >= 18;
}

const const justine: Userjustine: 
type User = {
    name: string;
    age: number;
}User = {
  name: stringname: 'Justine',
  age: 'Secret!',
Type 'string' is not assignable to type 'number'.
};

const isJustineAnAdult: string = function isAdult(user: User): booleanisAdult(const justine: Userjustine, "I shouldn't be here!");
Expected 1 arguments, but got 2.
Type 'boolean' is not assignable to type 'string'.

As you can see, TypeScript is very helpful in catching bugs before they even happen. This is one of the reasons why TypeScript is so popular among developers.