如何在 Angular 中使用带有 declarations.d.ts 的 .js 文件

Question

I have Angular 7 app and I want to include some typed JS constants from outside of the project (These constants are used in the AngularJS app, so I need to keep it in js). I defined new path in paths in tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"],
      "@dep/*": ["../../web-common/*"]
    }
  }
} 

In @dep i have test.js and test.d.ts that contains following

export const TEST_CONST = {
  parser: 'CSV',
  styler: 'XVE'
};

and

export interface TEST_CONST {
  parser: string;
  styler: number;
}

But when I import it and start using

import {TEST_CONST} from '@dep/constants/test';

...

console.log(TEST_CONST.styler);

It gives me

error TS2693: 'TEST_CONST' only refers to a type, but is being used as a value here.

I also tried to import ' @dep/constants/test.js ' but it is same.... How to import js file with typings into Angular app? As I understand it, this should be possible.

Answer 1

Try to add declare and remove export :

declare interface TEST_CONST {
  parser: string;
  styler: number;
}