Can't use interfaces from another file when they import any dependencies

Question

I have a problem with interface import. When I have interface with non import dependencies in separate files like:

/src/app/something/something.interface.ts

interface ISomething {
    a: String[];
}

I can use it in another file in the same directory without import it, fo example:

/src/app/someting/something.tsx

class Something extends React.Component<ISomething, any> {

}

But when I have interface like this:

import Page from '../components/page';

interface ISomething {
    a: String[];
    b: Page;
}

I get an error from compilation process: [2] ERROR in src/app/something/something.tsx(9,40): error TS2304: Cannot find name 'ISomething'.

I try to use export interface ISomething ... and import them in something.tsx but this get an error

[2] ERROR in src/app/application/education/react/renderer/renderer.tsx(8,9): error TS2305: Module '"/Users/xxx/Projects/react/src/app/something/something.interface"' has no exported member 'ISomething'.

When I put my ISomething interface in something.tsx file it work, but I want to keep it clean in separate file.

Do you have any idea why?

EDIT: tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../dist/out-tsc/app",
    "module": "es2015",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ],
    "angularCompilerOptions": {
        "preserveWhitespaces": true
    }
}

Possible duplicate of https://stackoverflow.com/questions/42233987/how-to-configure-custom-global-interfaces-d-ts-files-for-typescript. — ethan.roday, Dec 05 '18 at 18:54
Apologies - that was hasty on calling it a duplicate. The question is different, but the underlying issue (difference between scripts and modules) is the same. — ethan.roday, Dec 05 '18 at 19:07

score 1 · Accepted Answer · answered Dec 05 '18 at 19:00

1

This is due to some odd default behavior in Typescript (mostly there for legacy purposes). By default, if you have a file with no import/export statements in it, and it's included in your tsconfig.json (by default, everything in tsconfig's directly is included), Typescript will treat it as a script, as opposed to a module, and make its identifiers available in global scope.

You can disable this behavior by changing the value of module in your compilerOptions in your tsconfig.json. Which value you want depends on where this code is going, but using es6, for example, should give you the desired behavior.

answered Dec 05 '18 at 19:00

ethan.roday

2,485
1
23
27

I try to change compiler options into 'es6' but I doesn't see any difference in compilation process. I got the same errors. – kris_IV Dec 07 '18 at 09:46
Can you edit your question to include your tsconfig.json? That would be helpful in figuring out what the problem is. – ethan.roday Dec 08 '18 at 23:06
I edit my question and paste `tsconfig.json` and `tsconfig.app.json` – kris_IV Dec 09 '18 at 09:14

Can't use interfaces from another file when they import any dependencies

1 Answers1