Setting up a development environment that combines TypeScript with Docker can streamline your workflow and ensure consistency across different machines. This guide provides step-by-step instructions to help you configure TypeScript inside a Docker container for seamless development.

Prerequisites

  • Basic knowledge of Docker and command-line interface
  • Node.js and npm installed on your host machine
  • Text editor or IDE of your choice

Creating the Project Directory

Start by creating a new directory for your project and navigating into it:

mkdir typescript-docker && cd typescript-docker

Initializing Node.js and Installing TypeScript

Initialize a new Node.js project and install TypeScript:

npm init -y

npm install --save-dev typescript

Creating the TypeScript Configuration File

Generate a tsconfig.json file for TypeScript configuration:

npx tsc --init

Setting Up Docker

Create a Dockerfile in your project directory with the following content:

FROM node:14

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

CMD ["npx", "tsc", "--watch"]

Building and Running the Docker Container

Build the Docker image:

docker build -t typescript-dev .

Run the container:

docker run -it --rm -v ${PWD}:/app typescript-dev

Creating Sample TypeScript Code

Create a src directory and add a index.ts file:

mkdir src
echo "console.log('Hello, TypeScript with Docker!');" > src/index.ts

Testing the Setup

Ensure your Docker container is running with watch mode. When you make changes to index.ts, TypeScript will compile automatically. To run the compiled JavaScript, execute:

node dist/index.js

Conclusion

Integrating TypeScript with Docker provides a consistent and portable development environment. By following this guide, you can develop, compile, and run TypeScript projects efficiently across different systems without setup conflicts.