以前のリビジョンの文書です

moduleのimport

関数などを別ファイルに分割したい場合。

moduleを分ける

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

main.ts

import { getAsterString } from "./comm/func"
 
console.log(getAsterString("aaa"))

tsconfig.jsonの確認

tsconfig.json

    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
　　　　↓moduleの設定を変える
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */

htmlでインポート

tsc の–outオプションを付けて1つのファイルにまとめて出力するか、出来上がったjsファイルをすべて参照する必要がある。

index.html

<body>
    ...
    <script src="./comm/func.js"></script>
    <script src="./main.js"></script>
</body>
</html>

tscでコンパイル

>tsc main.ts comm/func.ts

猫型iPS細胞研究所

サイドバー

目次

moduleのimport

moduleを分ける

tsconfig.jsonの確認

htmlでインポート

tscでコンパイル

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

サイドバー

目次

moduleのimport

moduleを分ける

tsconfig.jsonの確認

htmlでインポート

tscでコンパイル

ページ用ツール