TypeScript: How to import from parent folder when compilation adds depth to project structure

Question

My project structure is as follows

dist
  |- src
  |   |- s.js
  |- test
      |- t.js
node_modules
results
  |- r.json
src
  |- s.ts
test
  |- t.ts
tsconfig.json
typings.d.ts

s.ts imports r.json as follows:

import * as results from '../results/r.json';

Obviously, this doesn't work after compilation as results is now two folders up...

What is the proper approach to fix this? Below is my tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "moduleResolution": "node",
    "outDir": "dist/",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "./typings.d.ts"
    ]
  },
  "include": [
    "src/**/*.ts",
    "results/r.json",
    "test/**/*.ts",
    "./typings.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 1

The best way is to avoid this altogether. Try to make the depth level matches.

e.g.:

root
  dist-es5
    index.ts
    index.spec.ts
  src
    index.ts
    index.spec.ts

As for keeping the test/spec code from distributed, you can have multiple tsconfig.json e.g. you can take a look at: Setting up tsconfig with spec/test folder