我正在尝试在 js 中使用 typescript 类。但在js代码中找不到它。我可以在 typescript 中使用它，但不能在 JavaScript 中使用它。
动物.ts
export class Animal {
name:string;
constructor(name:string) {
this.name=name;
}
public run(){
console.log(this.name+':Animal runs.');
}
public eat(){
console.log(this.name+':Animal eats.');
}
public sleep(){
console.log(this.name+':Animal sleeps.');
}
}
//TEST
let mouse:Animal = new Animal("Alfred");
let cat:Animal = new Animal("Gustavo");
if(mouse !=null && cat!=null){
mouse.run();
cat.sleep();
}else{
console.log("ERROR cat or mouse NULL");
}
animal.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
var Animal = (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.run = function () {
console.log(this.name + ':Animal runs.');
};
Animal.prototype.eat = function () {
console.log(this.name + ':Animal eats.');
};
Animal.prototype.sleep = function () {
console.log(this.name + ':Animal sleeps.');
};
return Animal;
}());
exports.Animal = Animal;
//TEST
var mouse = new Animal("Alfred");
var cat = new Animal("Gustavo");
if (mouse != null && cat != null) {
mouse.run();
cat.sleep();
}
else {
console.log("ERROR cat or mouse NULL");
}
},{}]},{},[1]);
用browserify在js中编译ts
var browserify = require('browserify');
var tsify = require('tsify');
browserify()
.add('src/test/typescript/animal.ts')
.plugin(tsify, { noImplicitAny: true })
.bundle()
.on('error', function (error) { console.error(error.toString()); })
.pipe(process.stdout);
js中ts的构建命令
node animal.build.js > src/test/typescript/animal.js
animal.html 该文件是包含 Animal 类的animal.js 的使用示例。 Animal.js 已加载，但无法从 html 上下文中找到 Animal 类!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animal test</title>
</head>
<body>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src="animal.js"></script>
<script>
$(document).ready(function() {
console.log("html ready");
console.log("now trying animal");
var a = new Animal('titi');
if(a === undefined || a ===null){
console.log("ERROR a not defined!");
}
else{
a.run();
}
});
</script>
</body>
</html>
animal.html 的 Google Chrome 控制台输出
导航至
file:///C:/dev/git/wscommerce/src/test/typescript/animal/animal.html
animal.js:8 Alfred:Animal runs.
animal.js:14 Gustavo:Animal sleeps.
animal.html:13 html ready
animal.html:14 now trying animal
animal.html:16 Uncaught ReferenceError: Animal is not defined(anonymous function) @ animal.html:16i @ jquery.min.js:2j.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2J @ jquery.min.js:2
问题 您可以在 chrome 控制台输出中看到，从 typescript 生成的 js 中，我可以使用 Animal 类。但从animal.html中，我找不到引用。我在 typescript 上遇到范围/构建问题。我的目标环境网络服务器将是 tomcat。我将把这个脚本打包成一个简单的 war 。我不想部署 Nodejs 服务器。
最佳答案
Animal 类在匿名函数内部声明，并且也声明为模块，那么外部代码将看不到 Animal 类。
如果你想使用 Animal 类，你需要需要 Animal 类:
var Animal = require('Animal');
var newAnimal = new Animal('test');
关于在纯 html 中找不到用 typescript 编译的 javascript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36530989/