Typescriptのモジュールの書き方で、何がどうだと外部で、どのように扱うのか、また内部だとどう扱うのか、
なかなかパッとコード比較できるページがないためここに記しておく
ある別ファイルで定義されている関数を、
違うファイルから利用する為に
読み込まれる方（使われる関数を集めたファイル）
と
読み込む方（使いたいファイル）
で書き方が違う
書き方はこう
※「使われる関数を集めたファイル」はutil配下にしている
外部モジュール
(読み込まれる方/util/strings_external.ts)
export function trimLeft(str:string): string{
return str.replace(/^¥s+/,'');
}//使いたい関数1
export function trimRight(str:string): string{
return str.replace(/^¥s+/,'');
}//使いたい関数2
特徴
※トップレベルとしてexportが利用されている
(読み込む方/external.ts)
import strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];//例
input.value = strings.trimLeft(input.value);
特徴
※importとして読み込み、その変数からアクセスしている
※requireとして参照している(common.js形式)
コンパイル
↓
cd currentdir
tsc --module commonjs external.ts
コンパイル後
↓
(読み込まれる方/util/strings_external.js)
function trimLeft(str) {
return str.replace(/^¥s+/, '');
}
exports.trimLeft = trimLeft;
function trimRight(str) {
return str.replace(/^¥s+/, '');
}
exports.trimRight = trimRight;
※exports.[関数]として代入になっている
(読み込む方/external.js)
var strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];
input.value = strings.trimLeft(input.value);
結合したファイル(external.js)
var strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];
input.value = strings.trimLeft(input.value);
※外部モジュールは読み込む方のtsを指定してコンパイルするので「結合したjsファイル=読み込む方のjs」ファイルですね。
内部モジュール
なんで内部モジュールが必要なのか？？
グローバル汚染しないように「名前空間」を使って書くため。
(読み込まれる方 util/strings_internal.ts)
module app.util.strings {
export function trimLeft(str:string): string{
return str.replace(/^¥s+/,'');
}
export function trimRight(str:string): string{
return str.replace(/^¥s+/,'');
}
}
※app.util.strings←ここが名前空間の書き方。
以下のコンパイル後の「util/strings_internal.js」を見てみると汚染されない書き方にコンパイルされている。
(読み込む方/internal.ts)
/// <reference path="util/strings_internal.ts"/>
(function (){
var input = document.getElementsByTagName('input')[0];
input.value = app.util.strings.trimLeft(input.value);
})();
※///←自身のタグは自身で閉じないとエラーになるよ。
error TS1084: Invalid 'reference' directive syntax.
↓コンパイル
cd currentdir
tsc --out out_internal.js internal.ts
※書き出しファイルをout_internal.jsとして命名
↓コンパイル後
(読み込まれる方 util/strings_internal.js)
var app;
(function (app) {
var util;
(function (util) {
var strings;
(function (strings) {
function trimLeft(str) {
return str.replace(/^¥s+/, '');
}
strings.trimLeft = trimLeft;
function trimRight(str) {
return str.replace(/^¥s+/, '');
}
strings.trimRight = trimRight;
})(strings = util.strings || (util.strings = {}));
})(util = app.util || (app.util = {}));
})(app || (app = {}));
(読み込む方 util/internal.js)
/// <reference path="util/strings_internal.ts"/>
(function () {
var input = document.getElementsByTagName('input')[0];
input.value = app.util.strings.trimLeft(input.value);
})();
結合したファイル(out_internal.js)
var app;
(function (app) {
var util;
(function (util) {
var strings;
(function (strings) {
function trimLeft(str) {
return str.replace(/^¥s+/, '');
}
strings.trimLeft = trimLeft;
function trimRight(str) {
return str.replace(/^¥s+/, '');
}
strings.trimRight = trimRight;
})(strings = util.strings || (util.strings = {}));
})(util = app.util || (app.util = {}));
})(app || (app = {}));
/// <reference path="util/strings_internal.ts"/>
(function () {
var input = document.getElementsByTagName('input')[0];
input.value = app.util.strings.trimLeft(input.value);
})();
ちょっとは参考になって頂ければ幸いです。
angular芸人やっています。
フォローおねがいしあｍす。