====== moduleのimport ====== 関数などを別ファイルに分割したい場合。復数に分割したファイルをそのままとしても取り込んでもjavascriptは実行できない。 * 記号なしリスト.tsファイルを1つのファイルにまとめて.jsにコンパイルする。 * webpackやgulpといった別ツールを使って、コンパイルしたjsファイルのモジュールのバインドをする。といったことが考えられるが、一番簡単なのはparcelを使用することのようだ。 [[https://docs.solab.jp/typescript/module/external/|外部モジュール]] [[https://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules|TypeScriptで複数ファイル構成する2つの方法]] ====== parcelの使い方 ====== [[https://ics.media/entry/190325/|TypeScriptのビルドにオススメ！Parcel入門]] ====== 1.npmの初期化 ======


// プロジェクトのディレクトリに移動して
>npm init

====== 2.parcelのインポート ======


>npm install --save-dev parcel

====== 3.ファイルを分けてexportとimport ======


export default function getAsterString(target:string):string{
    return "*" + target + "*"
}


import getAsterString from "./func"
...

console.log(getAsterString("aaa"))

====== 4.htmlでインポート ======



...
 //.tsにすること！

====== 5.ローカルサーバーの起動 ======


> npx parcel index.html --open

* ファイルの編集と同時にリロードされる（ホットリロードに対応！） * TypeScriptのモジュールは自動でインストール！ * TypeScriptのソースマップが有効！ * tsconfig.jsonのカスタマイズ可能！ ====== 6.本番用のビルと ======


npx parcel build index.html

htmlファイルのjs参照がのようにトップディレクトリにあると、ビルド後は


// 実際にはまとまらない...
>tsc main.ts comm/func.ts --out all.js
comm/func.ts:1:17 - error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.

===== 4.tscでコンパイル =====


>tsc main.ts comm/func.ts