Welcome, developers! If you're venturing into the world of TypeScript or looking to optimize your development process, this guide is your golden ticket. From project initialization to running tests and debugging, we've got it all covered.
This article is a companion piece to our YouTube tutorial, so make sure to check that out for a live walkthrough.
Table of Contents
- Initializing a New Project
- Installing and Building with TypeScript
- Configuring tsconfig.json
- Running the App with Nodemon and ts-node
- Setting up ESLint for TypeScript
- Integrating Jest for Testing
- Debugging in VSCode
Initializing a New Project
Start by creating a new project. Open your terminal and run:
npm init
You will be asked with a few questions. This command initializes a new Node.js project and creates a package.json
file for you.
Now create a folder named src
and inside, create a file index.ts
inside the src
folder with the following code:
const message: string = 'Hello world by Ahsan!'
console.log(message)
Your project structure so far should look as follows:
- package.json
- src
-- index.ts
Installing and Building with TypeScript
Next, let's install TypeScript. Run the following command:
npm install typescript --save-dev
To build the TypeScript code, use:
tsc
Configuring tsconfig.json
To customize your TypeScript settings, you'll need a tsconfig.json
file. You can generate one using:
tsc --init
Open the tsconfig.json
file and set it up based on your project needs. For example:
{
...
"compilerOptions": {
"target": "ESNext",
"module": "commonjs",
...
}
}
For our use case, we set update the following properties:
{
...
"compilerOptions": {
...
"target": "ESNext",
...
},
"rootDir": "./src",
"outDir": "./dist",
...
}
We will update our package.json
file to create a script that builds our application. Update the package.json
file as follows:
{
...,
"scripts": {
...,
"build": "tsc"
}
}
Running the App with Nodemon and ts-node
To run your app without explicitly building it each time, use nodemon
and ts-node
. Install them using:
npm install nodemon ts-node --save-dev
Create a file in the project's root folder and name it nodemon.json
. Add the following code to it:
{
"execMap": {
"ts": "ts-node"
}
}
Add the following script to your package.json
:
"scripts": {
"dev": "nodemon src/index.ts"
}
Now, you can run your app with:
npm run dev
Setting up ESLint for TypeScript
Linting is essential for maintaining code quality. Install ESLint and its TypeScript parser:
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
Create a .eslintrc.js
configuration file and add:
/* eslint-env node */
module.exports = {
env: {
node: true,
},
extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
}
Add a new script in the package.json
for linting as follows:
{
...,
"scripts": {
...,
"lint": "eslint ./src/**/.ts"
}
}
Note: You may want to ignore the
dist
folder because your editor's ESLint plugin may still be highligthing errors from it. For that, create an.eslintignore
file and add the entrydist
to it.
Integrating Jest for Testing
Jest is fantastic for testing TypeScript projects. Install it by running:
npm install jest ts-jest @types/jest --save-dev
Create a jest configuration by running the following command:
npx ts-jest config:init
The above command allows Jest to work with TypeScript.
Create a file named index.test.ts
inside the src
folder. Add the following code to it:
import { getMessage } from './index'
describe('getMessage()', () => {
it('should return the correct message when called', () => {
expect(getMessage()).toBe('Hello world by Ahsan!')
})
it('should be super smart', () => {
expect(true).toBe(true)
})
})
To make eslint happy for your test files, you need to update the .eslintrc.js
file as follows:
/* eslint-env node */
module.exports = {
env: {
node: true,
jest: true, // <-- Add this
},
extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
}
Update the test
script in the package.json
file as follows:
{
...,
"scripts": {
...,
"test": "jest",
"test:watch": "jest --watch"
}
}
Now you can run your tests with:
npm run test
# OR
npm run test:watch
Debugging in VSCode
Debugging TypeScript in VSCode is straightforward. Just hit F5
after configuring your launch.json
appropriately. You can go in the debugging panel to edit the launch.json
. Or create a new folder named .vscode
in the project. And inside the .vscode
folder, create a launch.json
file with the following content:
{
"version": "0.2.0",
"configurations": [
{
"name": "dev",
"request": "launch",
"runtimeArgs": ["run", "dev"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"type": "node"
}
]
}
Once you're done, your debugging panel should look as follows:
Conclusion
There you have it—a complete guide to setting up, testing, and debugging a TypeScript project. Whether you're new to TypeScript or a seasoned developer looking to refine your skills, this guide aims to serve all.
If you are particularly interested in Angular, integrating TypeScript should be second nature. Angular and TypeScript are like peanut butter and jelly—a match made in heaven! 🅰️
Don't forget to check out the companion YouTube video for a live demo. And the source code on GitHub. If you found this guide useful, consider subscribing to our YouTube channel for more content.
Note: This article was originally published on codewithahsan.dev
Top comments (0)