TSConfig.json Glob Patterns: The Mysterious Case of “**/*.{ts,js}” Not Working

Are you puzzled by the intriguing case of TSConfig.json glob patterns, particularly the curious circumstance of “**/*.{ts,js}” not functioning as expected? You’re not alone! Many developers have stumbled upon this enigmatic issue, leaving them wondering if it’s a bug or simply a nuance of the TypeScript configuration.

What are Glob Patterns in TSConfig.json?

Before diving into the mystery, let’s briefly explore what glob patterns are in the context of TSConfig.json. Glob patterns, also known as globbing, are a way to specify file patterns in a concise and expressive manner. In TSConfig.json, glob patterns are used to define the files that should be included or excluded from the compilation process.

{
  "compilerOptions": {
    // ...
  },
  "include": ["src/**/*.{ts,js}"],
  "exclude": ["node_modules/**/*"]
}

In the above example, the `”include”` option uses a glob pattern to specify that all files with the `.ts` or `.js` extension in the `src` directory and its subdirectories should be included in the compilation process.

The Problem: “**/*.{ts,js}” Not Working as Expected

Now, let’s get to the crux of the matter. Suppose you’ve specified a glob pattern like “**/*.{ts,js}” in your TSConfig.json, expecting it to include all files with either the `.ts` or `.js` extension in the entire project directory. However, to your surprise, this pattern doesn’t work as expected. You might be wondering, “Why?! Is this a bug or am I doing something wrong?”

The short answer is that this behavior is expected, but it’s not immediately obvious why. To understand what’s going on, we need to delve deeper into how glob patterns work in TSConfig.json.

Glob Pattern Resolution in TSConfig.json

When you specify a glob pattern in TSConfig.json, TypeScript resolves it using the following rules:

1. The pattern is resolved relative to the current working directory (CWD) of the TypeScript compiler.
2. The `**` wildcard matches any directory or subdirectory, but it does not match files.
3. The `{ts,js}` part of the pattern is treated as a set of file extensions, not as a single pattern.

With these rules in mind, let’s analyze why “**/*.{ts,js}” doesn’t work as expected.

Why “**/*.{ts,js}” Doesn’t Work

When TypeScript resolves the pattern “**/*.{ts,js}”, it essentially treats it as two separate patterns: “**/*.ts” and “**/*.js”. The problem lies in the fact that the `**` wildcard does not match files, only directories. Therefore, the pattern “**/*.ts” would match a directory named “*.ts”, not files with the `.ts` extension. Similarly, “**/*.js” would match a directory named “*.js”, not files with the `.js` extension.

To make matters more confusing, when you use `{ts,js}`, TypeScript treats it as an extension set, but it doesn’t automatically apply it to the `**` wildcard. This means that the pattern “**/*.{ts,js}” is equivalent to saying “match any directory that has a name with the extension ‘.ts’ or ‘.js'”, which is not what we intended.

Solutions and Workarounds

Now that we’ve explored the reasons behind the issue, let’s discuss some solutions and workarounds to get the desired behavior:

Solution 1: Use Separate Patterns for Each Extension

One simple solution is to use separate patterns for each file extension:

{
  "compilerOptions": {
    // ...
  },
  "include": ["**/*.ts", "**/*.js"]
}

This approach ensures that files with both `.ts` and `.js` extensions are included in the compilation process.

Solution 2: Use a Glob Pattern with a Directory Wildcard

Another solution is to use a glob pattern with a directory wildcard:

{
  "compilerOptions": {
    // ...
  },
  "include": ["src/**/*"]
}

In this case, the `src/**/*` pattern matches all files in the `src` directory and its subdirectories, regardless of their extensions.

Solution 3: Use a Custom Glob Pattern with the `find` Command

If you’re using a Unix-like system, you can leverage the `find` command to generate a custom glob pattern:

{
  "compilerOptions": {
    // ...
  },
  "include": ["$(find src -type f -name '*.ts' -o -name '*.js')"]
}

This approach uses the `find` command to search for files with the `.ts` or `.js` extension in the `src` directory and its subdirectories, and then passes the result to the `include` option.

Conclusion

In conclusion, the mysterious case of “**/*.{ts,js}” not working as expected in TSConfig.json is not a bug, but rather a nuance of how glob patterns are resolved. By understanding the rules of glob pattern resolution and using the solutions and workarounds provided, you can successfully include files with multiple extensions in your TypeScript compilation process.

Remember, when working with glob patterns, it’s essential to consider the context and the rules of pattern resolution to achieve the desired outcome. Happy coding!

Solution	Glob Pattern	Description
Solution 1	**/*.ts, **/*.js	Use separate patterns for each file extension
Solution 2	src/**/*	Use a glob pattern with a directory wildcard
Solution 3	$(find src -type f -name ‘*.ts’ -o -name ‘*.js’)	Use a custom glob pattern with the `find` command

• TSConfig.json Documentation
• TypeScript Issue: Glob pattern “**/*.{ts,js}” does not work as expected
• Stack Overflow: TypeScript tsconfig glob pattern to include all ts and js files

Frequently Asked Question

Are you stuck with tsconfig.json glob patterns not working as expected? We’ve got the answers!