Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I currently have the following project structure:

project/
  tsconfig.json
  webpack.config.js
  package.json
  node_modules/
    ...lots of dependencies
  typings/
    ...lots of .d.ts files for the dependencies
  src/
    ...folders for files for my projects

My tsonfig.json looks like:

{
"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "outDir": "./js",
    "rootDir": "./src",
    "sourceMap": true,
    "jsx": "react"
},
"exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
    ]
}

This all works very well and I can happily develop my application and run it in a browser.

I would now like to add some unit tests to my project and coming from a Java background my initial instinct is to place the tests in a separate folder:

project/
  test/
    ...all of my test cases

Of course, the files in the test/ folder need to reference the code in my src/ folder. How do I set that up?

Or is it "better" to place the tests inline in the src/ folder and have a separate webpack.config.js file for them?

Really confused about how this works in practice in larger TypeScript projects.

Note: I have seen this but found the answer less than illuminating. It seems that the referenced feature discussion about filesGlob would help me, but I just wonder how people are doing this today?

like image 396
David Sykes Avatar asked Mar 28 '16 23:03

David Sykes


People also ask

What can be defined in the Tsconfig json file?

json file is a file of JSON format which allows us to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root.

What is Rootdir in Tsconfig?

rootDirs can be used to provide a separate “type layer” to files that are not TypeScript or JavaScript by providing a home for generated .d.ts files in another folder. This technique is useful for bundled applications where you use import of files that aren't necessarily code: sh.

What is include and exclude in Tsconfig?

The include and exclude properties take a list of glob-like file patterns. The supported glob wildcards are: * matches zero or more characters (excluding directory separators) ? matches any one character (excluding directory separators)


2 Answers

Now other than rootDir, you can use rootDirs

"rootDirs": ["./scripts", "./src"],

for multiple folders.

Here is the API doc: https://www.typescriptlang.org/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs

like image 52
Hongbo Miao Avatar answered Sep 27 '22 18:09

Hongbo Miao


I think you are looking for path mapping. With the paths compiler option, you can specify not only a mapping to a single location but to several. This is the example from the documentation:

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "generated/*"
      ]
    }
}

If the compiler does not find a module in the expected location, it repeats module resolution in the "generated" subfolder. The baseUrl setting seems redundant but it is mandatory.

like image 41
lex82 Avatar answered Sep 27 '22 20:09

lex82