・Visual Studio Code 上でインテリセンスを効かせたい
・TypeScript使いたい
・あんまりいろんなことしたくない
サンプルソース
utils/util.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /** * 外部ファイル化実験 */export default class UtilServer { public static constnatMsg: string = "定数" private value: string = "0" constructor(value: string) { this.value = value } /** * 引数をデバッグ表示 * 引数がない場合は内部でもっている値を使用 */ public test(msg: string = null) { if (msg === null) { msg = this.value } console.log(msg) }}export = UtilServer |
routes/test.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 | // パスは呼び出し元(ここ)のパスを基準に指定import UtilServer from "./../utils/util"router.get("/", (req, res, next) => { const test1: UtilServer = new UtilServer("1") test1.test(UtilServer.constnatMsg) test1.test() const test2: UtilServer = new UtilServer("2") test2.test() res.render("xxxx")}) |
export default クラス名 { ... }
の形式でエクスポートした後
import クラス名 from 相対パス
の形式で使用できるようになる。
Visual Studio Code などでもインテリセンスが効くようになる。
コンソールには以下のように出力される
定数
1
2
1
2
tsconfig.jsonの"module"を"commonjs"にすること (importを使うため)
フロントエンドとサーバサイドについて
commonjs/amd → JavaScript を様々な環境で使用できるようにするための仕様
ECMAScript → JavaScriptそのものの標準仕様
フロント
require, import はそのままでは使えない (ECMA 2015 には標準仕様として存在するがブラウザが対応してない、というかブラウザの挙動的に現実的でない気がする)基本的には使用する前に読み込むかトランスパイラなどで事前にファイルを結合することになるはず。
1 | /// <reference path="相対パス" /> |
サーバ
もともとimport/exportはcommonjsの仕様なのでNode.jsで使用できる。requireでも読み込めるがちょっと古いやり方になる（インテリセンスが効かなかったりする）
Node.js の難点はフロントと微妙に違うせいで却って混乱することか
ECMA2015とcommonjsとTypeScriptがごっちゃになってるケースが多い印象
