How to create simple TypeScript Project on Windows

In this article, we will create a simple TypeScript project on Windows and then build and run it from our terminal (command prompt or PowerShell). First, we will install Node.js on our computer, create the Node.js project, install TypeScript, and then build and run the project. After that, we will install another package, but this time we will build and run using the "build" and "start" scripts from config.json file.

1) Installing Node.js

To install Node.js go to Node.js download page and download the latest LTS version (LTS stands for long-term support).

Run the downloaded .msi file and follow the installation wizard. The default settings on each installation step are fine, so just click the Next button, until you reach the Install button. After clicking that, the UAC (User Account Control) prompt will open, so make sure it has "OpenJS Foundation" as the "Verified Publisher" and then click "Yes" to install the Node.

To verify the successful installation, open the command prompt and run the following command:

node -v

The Node.js should also include npm (Node Package Manager), which is mainly used to install packages, but we also use it for project initialization, dependency management, and script management. To check that npm is also installed, run the following command:

npm -v

2) Creating Node.js project

Before installing TypeScript we need to create a project to install TypeScript into. Create a folder somewhere in your system, go there in the command prompt, and run the following command:

npm init -y

This will initialize a new Node project by creating a package.json file with the default settings.

3) Installing TypeScript

Next we will install TypeScript into the project by running this in the command prompt:

npm install --save-dev typescript @types/node

This will install the TypeScript and the @types/node package into the project as the development dependencies as these are the packages that are only needed when developing the project and not during the runtime.

The "@types/node" is a package that provides TypeScript type definitions for Node.js, so that the TypeScript will understand the types and interfaces available in Node.js.

We can confirm that the packages have been installed by examining the node_modules folder and checking that the package.json file contains both packages as a dependency.

4) Initializing TypeScript Configuration

Next, we need to create a tsconfig.json file which allows us to configure the TypeScript in the project. We create it with this command:

npx tsc --init

After running the above command, we should see the listing of the default settings that have been enabled:

Created a new tsconfig.json with:
 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

If we open the tsconfig.json, we should see all the available fields, most of them commented out except for those mentioned above.

We will uncomment two additional fields. They are not strictly required but are useful to set. Open tsconfig.json and:

• Find the outDir. Comment it out and set it to "./dist".

  "outDir": "./dist",
  

  With outDir, we tell the compiler where to put the compiled .js files. Without it, the compiled .js files would be put on the same path as TypeScript .ts files.

• Find the rootDir. Remove the // comment to enable it and set it to "./src".

  "rootDir": "./src",
  

  With rootDir, we tell the compiler where to look for source files. Without it, it may cause issues if you have source files outside what TypeScript infers as the root when your project is more complex.

Save the changes.

5) Creating a TypeScript entry point

In the previous step we set the "rootDir" to "./src", so we first need to create this folder with the mkdir command:

mkdir src

Then go inside the src folder:

cd src

If you have VS Code installed, then type the following command to open the editor in the current directory:

code .

Now, create a new file and add the following code:

console.log("Hello from TypeScript");

Save the file as index.ts. This will be the entry point to the project.

6) Compiling the project

To compile the project, go to the root folder of the project (where the tsconfig.json file is located) and run the following command:

npx tsc

This will compile the index.ts file into a JavaScript file. Since we used outDir in tsconfig.json, the compiled .js file will be located in the dist folder.

7) Running the project

To run the project, we use the node command followed by the compiled entry point of the project:

node dist/index.js

You should now see the "Hello from TypeScript" displayed in the terminal.

8) Installing another package to add colors to our messages

In this step, we will install ansi-colors package, which gives us ability to style and color text output in the terminal. This will make our project a bit more interesting.

To install a package, we use the npm command:

npm install ansi-colors

This will install ansi-colors package into the node_modules folder. In addition, the package.json file will be modified with the ansi-colors added as a dependency.

Next, remove everything from index.ts and replace it with the following content:

const c = require('ansi-colors');

console.log(c.blue('Hello, TypeScript!'));
console.log(c.red('This is an Error!'));
console.log(c.green('This is a Success!'));

9) Adding "build" and "start" script in config.json

Before we build the project again, let's make it easier to build and run TypeScript projects by adding build and start scripts in the config.json file.

Find the scripts section inside the config.json. It should already contain a "test" script. We will now add the "build" and "start" script.

"scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",  
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Save the changes. We will use these newly added scripts in the next step.

10) Building and running the project using the scripts

Now, instead of compiling with the npx tsc command as before, we will compile it using npm command:

npm run build

This will execute the command specified by the "build" script.

To run the "start" script, we could use npm run start, but since "start" is a special script, we can also just use:

npm start

With npm run build it doesn't seem like much of an improvement over the npx tsc, but sometimes our build command needs to specify additional flags and options, then it's just easier to set them once in the build script inside config.json and then simply remember to run npm run build.

It's the same with running the project, using npm start is simpler than node dist/index.js.

Summary

In this post, we learned how to create, build, and run the TypeScript project on Windows System. We first installed Node.js, initialized the node project, added the TypeScript package, initialized that, modified the configuration files, created a simple "hello world" script and then compiled and ran the project. As a bonus, we then added a styling package and learned how to add scripts in the config.json file to simplify building and running the project.