Are you new to Typescript? Do you need help creating and configuring a project directory for Typescript and Node? This article sequentially describes steps on how to create an initial project directory for Node and Typescript.
This article will guide you through 5 key steps as follows:
- Create a project directory and install dev dependencies
- Generate and edit the Typescript configuration file
- Test Typescript configuration
- Customize
npm
scripts - Test
npm
script commands
After completing this guide, you will have created a project directory in which you can do the following:
Run Typescript code without the manual compilation step.
Compile Typescript source code to JavaScript build code.
Run JavaScript build code.
Run Typescript code automatically on every change.
Now with the knowledge of what to expect from this article, let us go ahead and start by creating a new project directory.
1. Create a Project Directory and Install Dev Dependencies.
First and foremost, we need to create a new folder, generate a package.json
file, and install dev dependencies in the following sequence.
i). Create a folder with a name of your choice and open it in your favorite IDE.
ii). Generate a package.json
file using the command npm init -y
iii). Install development dependencies using the command
npm install -D typescript ts-node @types/node nodemon
By executing the above command, we have installed
-
typescript
for Typescript language. -
ts-node
to run Typescript code without manual compilation step -
@types/node
Typescript types for node -
nodemon
to restart code execution automatically on saving changes change
2. Generate and edit the Typescript configuration file.
After step 1, we can successfully create and execute Typescript code but it would not be convenient enough. To take better advantage of Typescript, we need to adopt some of the settings it provides. To achieve the objective of this step we will generate a tsconfig.json
file and make a few changes in the following sequence:
i). Run the command tsc --init
to generate the tsconfig.json
file.
ii). Replace your tsconfig.json
file with the following configs
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"rootDir": "./src",
"declaration": true,
"sourceMap": true,
"outDir": "./build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
These settings are not the only Typescript configurations that you can use. This is just what you need to get started. Visit Typescript Documentation to learn more about Typescript configuration.
3. Test your Typescript configuration.
Now that we have configured Typescript, let us see if we have done everything correctly up to this point. Below is a sequence of actions we need to perform to test the configuration.
i). Create a src
directory in your project directory.
ii). Navigate into the src
directory and create an index.ts
file inside it.
iii). Write a simple Typescript code snippet in index.ts
that prints a string on the console. For example:
const projectName: string = 'Project creator'
console.log(projectName)
ii). Run Typescript code before compilation: Run ts-node src/index.ts
//expected output
Project creator
v). Compile Typescript code into JavaScript. Run the tsc
command to compile Typescript and generate the ./build
directory. This step should create a build
directory in the root directory of your project.
v). Run compiled JavaScript code. Run node ./build/index.js
to test compiled code.
//expected output
Project creator
By following the above procedure, your code should execute without errors and produce the expected output. Typescript configuration is successful, let us go ahead and add some custom npm
scripts in the next step.
4. Customize npm
scripts.
After successfully testing the configuration, we need to add executable actions to the package.json
scripts object. This will enable us to compile and run our code with little effort using npm run <script>
commands.
Replace the scripts object in package.json with the following settings
"scripts": {
"build": "tsc",
"dev": "ts-node src/index",
"start": "node ./build/index",
"nodemon":"nodemon src/index"
},
The new scripts we have added will enable us to do the following:
Compile Typescript code and generate JavaScript. The script
build
, executed asnpm run build
, generates abuild
folder.Run Typescript files in development mode without emitting compiled code. The script
dev
, executed asnpm run dev
, runs Typescript code without creating thebuild
folder.Run compiled JavaScript. The script
start
, executed asnpm start
, runs theindex.js
file in thebuild
directory.
Let us go ahead and test the scripts in the next step.
5. Test npm
script commands.
Run the commands below to verify that they work as described in step 4.
- Run Typescript code:
npm run dev
. - Compile Typescript into JavaScript:
npm run build
. - Run compiled JavaScript:
npm run start
. - Run with auto-restart on change:
npm run nodemon
.
Finally, That's all you need to create an initial project directory for Node and Typescript. If you are interested in cloning this project starter, feel free to do so from my GitHub repository.
Top comments (0)