Encountering an issue with interface importing. When the interface contains non-import dependencies and is located in separate files like:
/src/app/something/something.interface.tsinterface ISomething {
a: String[];
}
I am able to utilize it in another file within the same directory without importing it, for example:
/src/app/someting/something.tsx
class Something extends React.Component<ISomething, any> {
}
However, when the interface includes imports like this:
import Page from '../components/page';
interface ISomething {
a: String[];
b: Page;
}
An error is encountered during the compilation process:
[2] ERROR in src/app/something/something.tsx(9,40): error TS2304: Cannot find name 'ISomething'.Attempting to use export interface ISomething ... and import them in something.tsx results in 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'.
If I place my ISomething interface in the something.tsx file, it works fine, but I prefer to keep it organized in a separate file.
Any insights on why this might be occurring?
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
}
}