javascript code compiled in typescript is not found in plain html
Question
I am trying to use a typescript class in js. But could not find it in js code. I can use it in typescript but not in the javascript.
animal.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]);
compilation of ts in js with browserify
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);
build command of ts in js
node animal.build.js > src/test/typescript/animal.js
animal.html This file is an example of use of animal.js that contains Animal class. The animal.js is loaded, but can't find Animal class from the html context!
<!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>
Google Chrome console output of animal.html
Navigated to
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
Problem You can see in the chrome console output that from within the typescript generated js, I can use the Animal class. But from animal.html, I can't find the reference. I encounter a scope / build problem on typescript.My target environnement webserver will be tomcat. I will package this scripts into a plain war. I do not want to deploy a nodejs server.
3 answers
solution1
1 2016-04-10 14:45:44
Animal class is declared inside anonymous function and is also declared as a module, then external code will not see the Animal class. If you want to use Animal class you need to require Animal class:
var Animal = require('Animal');
var newAnimal = new Animal('test');
solution2
0 2016-04-10 14:40:59
可以肯定的是，在chrome控制台中，请确保animal.js正在加载，并且加载速度足够快，可以从您的html代码中调用。
solution3
0 ACCPTED 2016-04-11 22:16:30
The solution that does not requieres dependencies, is :
1. add modules in all file
module Rizze{ // ts code ....
}
2. removing require clauses in ts files This will imply using Module.Class.function in order to use a references module.
3.1 build resources : gulpfile
//gulp
var gulp = require('gulp');
// for ts compil
var ts = require('gulp-typescript');
// For minification and offuscation
var rename = require('gulp-rename');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
//css minification
var minifyCss = require('gulp-minify-css');
var concat = require('gulp-concat');
var paths = {
js: 'src/main/**/*.ts',
css: 'src/main/**/*.css',
alljs: 'dist/js/all.js',
}
var tsProject = ts.createProject('tsconfig.json', { sortOutput: true });
gulp.task('default', function() {
return tsProject.src()
.pipe(ts(tsProject))
.pipe(gulp.dest('dist/js'));
});
3.2 build ressource: tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"sourceMap": true,
"removeComments": false,
"charset":"UTF-8",
"noImplicitAny" : true ,
"outFile": "all.js"
}
,
"filesGlob": [
"src/main/typescript/*.ts",
"!src/main/typescript/lib/**/*.ts"
]
}
With this config, it works without node, and without requirejs in a plain html/js environnement.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.