Configuración de un proyecto Web con TypeScript

File organization in TypeScript web projects is critical to keeping code clean and easy to maintain. A well-planned structure not only improves code readability, but also facilitates deployment and team collaboration. In this article, we will explore how to properly set up a web project using TypeScript, separating development files from production files for a more efficient workflow.

How to properly structure a web project with TypeScript?

When working with TypeScript in web projects, it is tempting to keep all our files in a single folder. However, this practice can lead to confusion as the project grows. The best strategy is to clearly separate the development files from the files that will be deployed in production.

To implement this structure, we need to:

1. Create specific folders for source code and public files.
2. Configure TypeScript to compile the files to the correct location.
3. Update the references in the HTML to point to the compiled files.

Creating the basic folder structure

The first step is to set up a folder structure that clearly separates the source code from the public files:

1. Create a main folder for the project (e.g., "sitio-web").
2. Within this folder, create two subfolders:
   • public: for files to be deployed (HTML, CSS, compiled JS).
   • src: for source code files (TypeScript files).

web-site/├─── public/│ ├─── index.html│ │ └── scripts/│ └── main.js (compiled)└── src/ └── main.ts

This structure allows a clear separation between what is development code and what will be deployed in production. The public folder will contain everything that needs to be accessible from the browser, while src will hold our TypeScript code that does not need to be uploaded to the server.

Configuring TypeScript for directed compilation

In order for TypeScript to compile files to the correct folder, we need to create and configure a tsconfig.json file:

1. Navigate to the src folder in the terminal.
2. Run the command to initialize the TypeScript configuration:

tsc --init

3. Modify the generated file to specify the output directory:

{ " compilerOptions": { " target": "es2016", " module": "commonjs", " outDir": "../public/scripts", " esModuleInterop": true, " forceConsistentCasingInFileNames": true, " strict": true, " skipLibCheck": true}

The key parameter here is "outDir": "../public/scripts", which tells TypeScript to place the compiled JavaScript files in the scripts folder inside public.

Compiling TypeScript code

With the configuration set up, we can now compile our TypeScript code by pointing to the configuration file:

tsc -p tsconfig.json

This command will read the configuration and compile all TypeScript files according to the specified rules, placing the resulting JavaScript files in the target folder.

Updating references in the HTML

Finally, we need to make sure that our HTML file correctly points to the compiled JavaScript files:

<!-- Before --><script src="main.js"></script>
<!-- After --><script src="./scripts/main.js"></script>

This update ensures that the browser loads the JavaScript file from the correct location.

Why is this structure important for deployment?

The separation between development and production files offers multiple advantages:

1. Enhanced security: TypeScript source code is not exposed publicly.
2. Simplified deployment: Only the public folder needs to be uploaded to the server.
3. Clear organization: Makes it easy to navigate and maintain the code.
4. Efficient collaboration: Team members can quickly identify which files to modify and which are automatically generated.

This structure also facilitates integration with more advanced build tools such as Webpack or Parcel if you decide to scale your project in the future.

Proper file organization in TypeScript web projects is a fundamental step in developing maintainable and scalable applications. Implementing this structure from the beginning of the project will save you time and headaches as your application grows. Have you tried this structure in your projects? Share your experience in the comments and tell us what other organizational practices you use in your developments.