typescriptで自作のJSをimportする際のお作法について

前提・実現したいこと

typeScriptを使用したvueアプリを作る場合のお作法・エラー解消方法について知りたいです。
tsを活用してアプリを作っているのですが、自作のjsをimportしたい場面が出てきました。

調べた感じ、型定義を記載する方法が最も良さそうだったので、下記のソースコードのように記載しました。
この状態でも動くには動くのですが以下のようなエラーが出ているため解決策を知りたいです。

発生している問題・エラーメッセージ

…src/common/constants.d.ts' is not a module

該当のソースコード

■App.vue

vue
1import constants from './common/constants.js'

■constants.js

js
1export default {
2  menuItems: [
3    {
4      name: 'HOME',
5      url: '#'
6    },
7    {
8      name: 'ABOUT',
9      url: '#'
10    },
11    {
12      name: 'WORK',
13      url: '#'
14    },
15    {
16      name: 'SERVICE',
17      url: '#'
18    },
19    {
20      name: 'BLOG',
21      url: '#'
22    },
23    {
24      name: 'ACCESS',
25      url: '#'
26    }
27  ]
28}

■constants.d.ts

  interface constants {
    menuItems: {key: string}[]
  }

■階層

src
├App.vue
└common
　└constants.d.ts
　└constants.js

補足情報（FW/ツールのバージョンなど）

vueのver等は以下の通りです。情報の不足等ありましたらご指摘ください。

    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.9",
    "vuex": "^3.4.0"

行動規範の内容に同意します

回答1件

ベストアンサー

TypeScriptに書き直す、という選択肢はどうでしょうか？定数ならas constで一発です。

typescript
1const obj = {
2  menuItems: [
3    {
4      name: 'HOME',
5      url: '#'
6    },
7    {
8      name: 'ABOUT',
9      url: '#'
10    },
11    {
12      name: 'WORK',
13      url: '#'
14    },
15    {
16      name: 'SERVICE',
17      url: '#'
18    },
19    {
20      name: 'BLOG',
21      url: '#'
22    },
23    {
24      name: 'ACCESS',
25      url: '#'
26    }
27  ]
28} as const;
29
30export default obj;