DEV Community

Cover image for How to Generate a Quick Node.js Project with TypeScript.
Christian Prado Ciokler
Christian Prado Ciokler

Posted on • Edited on

How to Generate a Quick Node.js Project with TypeScript.

Photo by Blake Connally on Unsplash

If you're a developer, you know that starting a new project can be a daunting task. Setting up your development environment, installing the necessary packages, configuring the build tools, and more can take a lot of time and effort. Fortunately, TypeScript makes it easy to create a new Node project without all the hassle. In this post, we'll walk you through the steps to generate a quick Node project with TypeScript.

Here are the steps you need to follow:

Step 1: Install Node.js and npm if you haven't done it yet.

Step 2: Open a terminal window and navigate to the folder where you want to create your project.

Step 3: Run the following command to create a new folder for your project:

    mkdir my-project && cd my-project
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize npm for your project using the following command:

    npm init -y
Enter fullscreen mode Exit fullscreen mode

Step 5: Install the necessary dependencies for a TypeScript project:

    npm install --save-dev typescript ts-node @types/node
Enter fullscreen mode Exit fullscreen mode

Step 6: Create a TypeScript configuration file named tsconfig.json in your project's root directory with the following content:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Create a folder named src in the root directory of your project, and create a TypeScript file named index.ts inside it:

    mkdir src && touch src/index.ts // linux
    mkdir src ;; New-Item -Type File src/index.ts // windows
Enter fullscreen mode Exit fullscreen mode

Step 8: Open the index.ts file in your favorite code editor and write some TypeScript code, for example:

const message: string = 'Hello, TypeScript!';
console.log(message);
Enter fullscreen mode Exit fullscreen mode

Step 9: In your package.json file, add a new script to compile and run your TypeScript code:

{
  "scripts": {
    "start": "ts-node src/index.ts",
    "build": "tsc"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 10: Finally, run the following command to compile and run your TypeScript code:

npm run start
Enter fullscreen mode Exit fullscreen mode

This will compile your TypeScript code into JavaScript and run it using ts-node. You can also run the build script to compile your code and generate JavaScript files in the dist folder:

npm run build
Enter fullscreen mode Exit fullscreen mode

Thanks and have a great day ahead!

Don't forget to give this post a heart if you found it useful. It helps others discover helpful posts like this one.

Top comments (2)

Collapse
 
craft_engineer profile image
Craft Engineer

I think nowadays, there is an easier way how to do it:

1. `yarn add typescript tsc`
2. `yarn add --dev ts-node`
3. `yarn tsc --init`
4. add the following commands into `package,json`:
{
  "scripts": {
    "build": "tsc",
    "dev": "ts-node src/index.ts"
  }
}

5. run local development mode with `yarn dev` (you can also run build command `yarn build`)
6. done 🎉

Enter fullscreen mode Exit fullscreen mode

what do you think?

Recently I published a blog post about it, for more details craftengineer.com/easier-way-to-se...

Collapse
 
chrisciokler profile image
Christian Prado Ciokler

Absolutely agree, I've been meaning to give this post a bit of a boost, but I just haven't had the chance.