typescriptでimportとexportを使う

ファイル分割するときにimport,exportを使おうとしたらハマった

moduleの違い

es6の書き方に慣れていたため，importとexportを使って実装したい...

export.ts

export ClassName {
    〜
}

import.ts

import { ClassName } from "./export.js";

よし，コンパイルだ!!

Uncaught ReferenceError: exports is not defined

ブラウザ上でこんなエラーが出る．

調べてみるとCommonJSモジュールの問題だと分かったので，moduleを「ES6」に変更

【TypeScript】モジュール分割で起きたエラーを調べる（CommonJSが原因）

exports is not definedエラーはCommonJSが原因

tsconfig.json

"module": "CommonJS",
↓
"module": "ES6",

こんな感じで変更してコンパイルされているのを確認し，ページをリロード

そしたらまたこんなエラーが出た

Uncaught SyntaxError: Cannot use import statement outside a module

ブラウザ上でモジュールを使う

これについて調べてみると，問題はモジュールをブラウザ上で使う際にscriptタグの中に

<script type="module"></script>

を追加しなければならないことがわかった．

MDN Web Docs

最初に type="module" を script 要素に含めることで、そのスクリプトがモジュールであることを宣言します。

これを追記して再チャレンジ

そしたらまたまたエラーが出た

Access to script at 'file:///Users/~/import.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:7 GET file:///Users/~/export.js net::ERR_FAILED

moduleをブラウザで使うときはhttp通信じゃないといけない

上記のエラーの内容はHTTP通信しなさいということだったのでローカルサーバーを立ち上げてみた．

今回は簡単に「serve」を使ってみる.

npm install -g serve
でインストール
serve
でローカルサーバー立ち上げ

これで立ち上がったローカルサーバーにアクセスしたら，なんとか成功！！

まとめ

typescriptでimport,exportを用いてファイル分割をしたいときには

• ES6モジュールを使う
• scriptタグの中にtype="module"を追記
• ローカルサーバーを立てる