Type something to search...
Run TypeScript Without Compiling

Run TypeScript Without Compiling

Introduction

In this post, I will show you how to run TypeScript without compiling it to JavaScript. This is useful for debugging and testing. In this post, I will show you how to do it.

Setup a TypeScript Project

Step 1: Create a Directory

Create a directory for the project.

Terminal window
# Create a directory
mkdir run-typescript-without-compiling
# Change directory
cd run-typescript-without-compiling

Step 2: Initialize a Node.js Project

Initialize a Node.js project.

Terminal window
# Initialize a Node.js project
yarn init -y

Step 3: Install TypeScript and @types/node

Install TypeScript and @types/node.

Terminal window
# Install TypeScript and @types/node
yarn add -D typescript @types/node

Step 4: Initialize a TypeScript Project

Initialize a TypeScript project.

Terminal window
# Initialize a TypeScript project
yarn tsc --init

Step 5: Create a TypeScript File

Create a TypeScript file.

Terminal window
# Create a src directory
mkdir src
# Create a TypeScript file
touch src/index.ts

Step 6: Example Code

Add the following code to the TypeScript file.

src/index.ts
const sum = (a: number, b: number): number => a + b;
const subtract = (a: number, b: number): number => a - b;
const multiply = (a: number, b: number): number => a * b;
const divide = (a: number, b: number): number => a / b;
console.log(sum(1, 2));
console.log(subtract(1, 2));
console.log(multiply(1, 2));
console.log(divide(1, 2));

Step 7: Run the TypeScript File

Now, we will install ts-node and run the TypeScript file.

Terminal window
# Install ts-node
yarn add -D ts-node

Add the following code to the package.json file.

package.json
{
...
"scripts": {
"playground": "ts-node src/index.ts",
"playground:watch": "nodemon -e ts -w . -x esr src/index.ts",
"build": "tsc",
"build:watch": "tsc -w",
"build:debug": "tsc --sourceMap",
"build:debug:watch": "tsc -w --sourceMap",
"start": "node dist/index.js",
"start:watch": "nodemon -e js -w dist -x esr dist/index.js"
},
...
}

Note

nodemon is a utility that will monitor for any changes in your source and automatically restart your server. You can install it using yarn global add nodemon or npm install -g nodemon.

Run the TypeScript file.

Terminal window
# Run the TypeScript file
yarn playground
# Output
3
-1
2
0.5

Conclusion

I demonstrated how to run TypeScript in this article without converting it to JavaScript. For testing and troubleshooting, this is helpful. I demonstrate how to accomplish that in this post.

References

Related Posts

Check out some of our other posts

Setting up JWT Authentication in Typescript with Express, MongoDB, Babel, Prettier, ESLint, and Husky: Part 2

Setting up JWT Authentication in Typescript with Express, MongoDB, Babel, Prettier, ESLint, and Husky: Part 2

Introduction Why do we even need an authentication mechanism in an application? in my opinion, it doesn't need to be explained. The phrases authentication and authorization have likely crossed you

read more
How to Install and Configure Node.js on EC2 Instance Amazon Linux 2

How to Install and Configure Node.js on EC2 Instance Amazon Linux 2

Introduction Node.js does not exist in the default Amazon Linux 2 repository. So, we need to add the Node.js repository to the system. In this post, we will learn how to install and configure Node

read more
Setup Nextjs Tailwind CSS Styled Components with TypeScript

Setup Nextjs Tailwind CSS Styled Components with TypeScript

Introduction In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript, and we will use the following tools:Nextjs Tailwind CSS Styled Components TypeScriptP

read more
Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript

Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript

Introduction In this tutorial, we will be building a customizable image slider in React using hooks, SCSS, and TypeScript. An image slider is a common UI element used in web applications to displa

read more