0

For months I've dealt with having my .ts and .js files side by side inside of each folder because the app is in production and the conversion from JS to TS caused this inconvenience while still providing more benefits overall.

I got the folder structure to compile correctly after a bit of tinkering and reading the docs but there is 1 file that I can't include without breaking the structure and it's the root-level server.ts file.

Project Structure (current compilation):

The 'problem' files are shown with 

/server (root)
  server.js
  server.ts (problem file)

    /routes (dist folder)
        /api
            /v1
                index.js
                /accountDataFunctions
                  duplicates.js
                  notations.js
                /accountImportFunctions
                  dataIntegrity.js
                /dataFormatting
                  addressValidation.js
                  emailValidation.js
                  ...
                /sqlQueryGeneration
                  selectQuery.js
                  updateQuery.js

    /src (dev folder)
        /api
            /v1
                index.ts
                /accountDataFunctions
                  duplicates.ts
                  notations.ts
                /accountImportFunctions
                  dataIntegrity.ts
                /dataFormatting
                  addressValidation.ts
                  emailValidation.ts
                  ...
                /sqlQueryGeneration
                  selectQuery.ts
                  updateQuery.ts

If I include server.ts in the tsconfig.json

it will compile like this:

Bad/other compilation:

    /routes (dist folder)
        /src/api/v1
            [...folder structure]
            server.js
        /api/v1
            (empty)

The current configuration does everything correctly except that it neglects the server.ts at the root level in the /server folder.

tsconfig.json:

/* tsconfig.json */
{
  "compilerOptions": {
      "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
      "outDir": "./routes",                        /* Redirect output structure to the directory. */
      "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
      "resolveJsonModule": true,
      "removeComments": true,                /* Do not emit comments to output. */
      "strict": false,                           /* Enable all strict type-checking options. */
      "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
      "rootDirs": ["./","./src"],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
      "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
      "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  },
  "exclude": ["node_modules"],
  "include": [
    "src/api/v1/index.ts",
    "src/api/v1/**/*.ts"
  ]
}

StackOverflow Links I've already referenced:

Some of these have helped me get to this point, but they're different enough that I can't figure out how to adapt them.

tsconfig.json file outside of project directory

How to compile a specific file with tsc using the paths compiler option

group typescript files into more than one outFile

How can I specify multiple source folders in my tsconfig.json?

Ideal situation

I'm running concurrently as follows:

/* package.json */

"scripts": {
        "start": "tsc && node server.js",
      ⭐"serve": "concurrently \"nodemon run server.js\" \"tsc -w\""
    },

Preferably I'd like to be able to add an extra tsc command to that to watch that single file

OR

I can add another tsconfig.json file in IF there isn't a simpler solution in the original tsconfig.json file.

Complications worth noting

FOLDER/FILE STRUCTURE

I need to keep the folder structure server/routes/api/v1/* with the relative server.js file in server because of the CI/CD pipeline and the fact that this is already in production.

USING server.js instead of server.ts

When attempting to exclude server.ts, tons of import/esmodule bugs pop up. server.js is ultimately the file that controls everything from including routing, daemon, and permissions. It's a small file but it controls a lot of things so there are a lot of connections between server.ts and many other .ts files throughout the server.

Bob Bass
  • 127
  • 2
  • 16

1 Answers1

0

For anyone else who may run into this problem, here are a few of the solutions I found:

  1. ⭐ [BEST SOLUTION] Refactor folder structure routes/ was renamed to dist/ and then server.ts was moved from / into src and the outfile was set to dist/

This required a few modifications to my CI/CD pipeline but overall it saved me a ton of time to just bite that bullet.

  1. Add files to the tsconfig.json file:
/* tsconfig.json */
{
  "compilerOptions": {
      "target": "es6",
      ...
  },
  "exclude": ["node_modules"],
  "include": [
    "src/api/v1/index.ts",
    "src/api/v1/**/*.ts"
  ],
  "files": ["server.ts", "api/v1/index.ts"]
}
  1. Move tsconfig.json down 1 level if possible - the production app is compiled from TypeScript so it doesn't matter if it's slightly less than ideal for production when tsconfig.json, src/, and server.ts aren't making it into the build. They're just for development.

My folder structure was set up as follows:

project
tsconfig.json (include server, exclude client)
    server
    client
Bob Bass
  • 127
  • 2
  • 16