私はAtomicエディタでTypescriptコード の非常に簡単な例を書こうとしています。 この例は、1つのmain.tsと、1つの小さなクラス(myclasses.ts)が の非常に小さいモジュールで構成されています。私は通常モジュールをインポートします
翻訳プロセスはエラーと.jsファイルなしで行われます 出力フォルダに通常作成されています。 私はトランスパイルCLI翻訳後にブラウザに何も表示されない
tsc *.ts --target 'es6'
を使用して、私はそれが すべてのエラーや警告なしに終了し、両方のケースでは、アトムの中からも、それを行います。 私が使用してCLIからmain.jsファイルを実行すると:
node main.js
それだけで正常に動作し、私はその結果、すべての機能 の出力を得るしかし、私はmain.jsを呼び出すHTMLファイルを開くときノーヘッハ ハプニング!エラーなし、コンソール、出力なしで警告なしには何も...
これはtsconfig.jsonの内容は次のとおりです。
{
"compilerOptions": {
"target": "ES2015",
"module": "umd",
"outDir": "built",
"strict": true
},
"exclude": [
"node_modules"
]
}
をして(transpiling後)このmain.js:
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "./myclasses"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const myclasses_1 = require("./myclasses");
var colors;
(function (colors) {
colors[colors["Red"] = 0] = "Red";
colors[colors["Green"] = 1] = "Green";
colors[colors["Blue"] = 2] = "Blue";
})(colors || (colors = {}));
;
let msg = 'Ameme tmena';
let result = msg.toUpperCase();
console.log(result);
let aa = msg.endsWith('a');
console.log(aa);
function tryLoop(l) {
for (let i = 0; i < l; i++) {
let PowrOf2 =() => Math.pow(i, 2);
console.log(i, PowrOf2());
}
}
;
tryLoop(7);
let test1;
test1 = 'Amama Terr';
let ThEnd = test1.endsWith('r');
console.log(ThEnd);
let p1 = new myclasses_1.Point(78, 89);
p1.calcXY();
p1.x = 8;
p1.y = 90;
p1.calcXY();
p1.x = -8;
p1.y = 0;
p1.calcXY();
console.log('Hiiiiiii');
let testing;
testing = 19;
testing += (testing > 20) ? -2 : +2;
console.log(testing);
});
umdモジュールを作成する場合は、require.jsのようなブラウザ用のモジュールローダーが必要です。 webpackやbrowserifyを使ってバンドルすることもできます。 –
お返事ありがとうございますが、詳細を教えてください。私の場合、require.jsの使い方は?何を追加するか何をすべきか不便をおかけして申し訳ありません...ありがとうございました –
私はそれをしてくれてありがとう、本当に簡単でした。 –