Arranging the output of a Typescript project

I'm currently advocating for Typescript to be implemented in our web application. Can anyone provide insight on the best method for structuring Javascript output files? Should they be excluded from source control? And when it comes to testing, is it preferable to have the JS output located alongside the TS files, or organized differently? In my experience with Intellij, it seems to prefer keeping the Javascript files next to the Typescript ones.

I would greatly appreciate hearing specific examples of how others organize their TS and JS files, as well as their testing and building process when using transpiled code for web applications.

Answer №1

What is the recommended approach for organizing JavaScript output files?

I typically place them adjacent to the corresponding .ts files for easier visibility and understanding of what has been generated.

Should generated files be excluded from source control?

Absolutely. There's no need to include automatically generated files in version control.

When testing the application, is it preferable to keep the JS output alongside the TS files or in a separate directory?

As I mentioned before, keeping them next to each other works well. I hope this clarifies things 🌹

Answer №2

In order to demonstrate the subjective nature of this topic, I will present alternate viewpoints to basarat’s response LOL.

What is the most effective strategy for organizing JavaScript output files?

My personal preference is to have the output files stored in a separate directory. Similar to how other compiled languages operate, it makes sense to have distinct directories for source files and output files.

  • src contains all .ts files except for type definitions, which belong in typings.
  • lib houses server (nodejs) outputs.
  • dist stores client (browser) outputs.

This setup makes it clear what has been generated when there is nothing else cluttering the directory.

Furthermore, as the codebase expands, it becomes simpler to create batch build scripts tailored for each directory.

Should generated files be excluded from version control?

The decision varies. The TypeScript team opts to version the generated files in the TSC repository, but only includes the Latest Known Good version.

  • If the goal is for users to clone the repository and immediately run the code, then versioning the files is advisable.
  • However, if the intention is for users to clone the repository, install dependencies, build, and then execute the code, omitting file versioning may be more suitable.

In cases where a package is intended for distribution through a package manager, it is typically unnecessary to version generated files.

When testing the application, is it preferable to keep the JS output alongside the TS files or in a separate tree?

The same principles apply as discussed above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

In This specific part of the Angular2 Tutorial there is a feature that allows users to add new items to an array. Somehow, when the item is added, the ID is automatically incremented but the exact process behind this automation remains a mystery. I am awa ...

Typescript React: Implementing type definitions for JSS classes object

Here is the react code I am working with: import React from 'react'; import withStyles from "react-jss"; const styles = { box: { border: "2px solid #000" } }; interface ComponentProps {} class Welcom ...

One effective way to transfer state to a child component using function-based React

My goal is to pass an uploaded file to a child component in React. Both the parent and child components are function-based and utilize TypeScript and Material-UI. In the Parent component: import React from 'react'; import Child from './ ...

What is the best way to design a basic server component that has the ability to retrieve data in NextJS 13?

Exploring the world of NextJS, I am currently utilizing NextJS 13 with the new app directory instead of the traditional pages directory structure. Despite trying various methods to fetch data, none seem to be working as expected. The process should be stra ...

Creating a universal timer at the application level in Angular

Is there a way to implement a timer that will automatically execute the logout() function in my authentication.service at a specific time, regardless of which page I am currently on within my application? I attempted to create a timer within my Authentica ...

Maintaining the consistent structure of build directories within a Docker container is crucial, especially when compiling TypeScript code that excludes the test

Our application is built using TypeScript and the source code resides in the /src directory. We have tests located in the /tests directory. When we compile the code locally using TSC, the compiled files are deposited into /dist/src and /dist/test respectiv ...

Is it possible to define a namespaced external module in TypeScript?

Currently, I am dealing with some legacy js modules that are either namespaced on window or define'd if the page is using AMD. Here's an example: // foo/bar.js (function (root, factory) { if (typeof define === "function" && define.am ...

How to efficiently store and manage a many-to-many relationship in PostgreSQL with TypeORM

I have a products entity defined as follows: @Entity('products') export class productsEntity extends BaseEntity{ @PrimaryGeneratedColumn() id: number; //..columns @ManyToMany( type => Categories, categoryEntity => cat ...

Create typings for object properties in TypeScript

I am inexperienced with TypeScript and am looking to set up types for my object keys. I have explored a few methods to accomplish this, but I am encountering an issue where an error is not triggered when assigning a value of a different type. For example: ...

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

Utilize multiple validators.patterns within a single value for enhanced data validation

I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern. This is my HTML code: ...

Leveraging the TypeScript definitions for express-validator

I've been working on converting my code to TypeScript, but I'm running into issues with express-validator definitions. Here's a snippet of my code: ///<reference path='../../../d.ts/node.d.ts' /> ///<reference path=&apos ...

Intro.js is not compatible with React and Remix.run

I am currently working on implementing onboarding modals for header links using intro.js within a React environment. Below is the code snippet: import { useState, type FC } from 'react' import type { Links } from '../types' import &apo ...

Unable to serve static files when using NextJs in conjunction with Storybook

The documentation for Next.js (found here) suggests placing image file paths under the public directory. I have a component that successfully displays an image in my Next.js project, but it doesn't render properly within Storybook. The image file is ...

Save data to local storage when the form is submitted, retrieve it when the page is reloaded

I need help with setting form data in local storage upon form submission and displaying a message in the console if the form has already been submitted when the page is refreshed. I am struggling to write the reload condition for this functionality. Here ...

Integrating modules in Angular 2

Exploring the functionalities of Angularjs 2.0, I encountered an issue when attempting to inject a service into a class. Below is the code snippet that's causing trouble: import {Component, View, bootstrap, NgFor, HttpService, Promise} from 'ang ...

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

On a single page, I have two components sharing some methods and properties. How can I utilize a service to achieve this? See the sample code snippet below... @Component({ selector: 'app', template: '<h1>AppComponent1</h1>' ...

Tips for isolating data on the current page:

Currently, I am using the igx-grid component. When retrieving all data in one call and filtering while on the 3rd page, it seems to search through the entire dataset and then automatically goes back to "Page 1". Is there a way to filter data only within th ...

Using an array of functions in Typescript: A simple guide

The code below shows that onResizeWindowHandles is currently of type any, but it should be an array of functions: export default class PageLayoutManager { private $Window: JQuery<Window>; private onResizeWindowHandlers: any; constructor () { ...

What are the best methods for testing a function containing multiple conditional statements?

I have a complex function that I want to showcase here, it's quite simple but for some reason, I'm struggling with writing unit tests for it. I don't need the exact unit test implementation, just a general approach or tips on how to handle i ...