Typescriptでtscコマンドを使ってコンパイルしたときに、importしたファイル名に.jsを付けたい
退会済みユーザー
総合スコア0

Question

### 実現したいこと

Typescriptでmain.tsからtscを使ってmain.jsを作ったときに、
```Javascript
import { Game } from './game';
```
ではなく、
```Javascript
import { Game } from './game.js';
```
となるようにする。
もしくは.jsが付いていなくてもブラウザから正しく認識されるようにする。

### 前提

main.tsでは以下のようにしている。
```Typescript
import { Game } from './game';
```

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

```
GET http://127.0.0.1:5500/dist/game net::ERR_ABORTED 404 (Not Found)
```

コンパイルするたびに毎回手動で.jsを付けるのは大変なので、自動で設定できる方法があれば教えてください。

Accepted Answer

こちらの記事に回答が載ってました。https://qiita.com/masato_makino/items/8451bf4e62ad27823af1#import%E3%81%A8%E6%8B%A1%E5%BC%B5%E5%AD%90

要するに、
```
import { Game } from './game';
```
のところを
```
import { Game } from './game.js';
```
としてコンパイルしてできる予定のjsファイルを指定してあげればよいです。

Answer

### この回答はGPT-4による自動生成回答です
`tsconfig.json`ファイルをプロジェクトのルートディレクトリに作成し、以下のように設定してください。

```json
{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "src/types/*"
      ]
    },
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmitOnError": true,
    "importsNotUsedAsValues": "error",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2020"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}
```

この設定により、TypeScriptコンパイラは、`import { Game } from './game';`を`import { Game } from './game.js';`に変換して出力します。これにより、ブラウザが正しくモジュールを読み込むことができます。