时间戳

首页 > 解决方案 > NodeJS 和浏览器的打字稿

node.js - NodeJS 和浏览器的打字稿

问题描述

我是 nodejs 的新手（熟悉 typescript 和 JS）。我在使用 typescript 创建代码时遇到问题，该代码适用于使用 typescript 的浏览器和 nodejs。鉴于以下示例代码，我希望该类在节点和浏览器中都可重用。

-index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

</head>
<body>
    <script type="text/javascript" src="/js/myabstractclass.js"></script>
    <script type="text/javascript" src="/js/myclass.js"></script>
    <script>
        var myclass = new sample.myclass();
        myclass.log("hello world");
    </script>
</body>
</html>

-nodeserver.ts

var express = require('express');
var webapp = express();
var path = require('path');
var server = require('http').Server(webapp);

var mac = require('./myabstractclass');
var mc = require('./myclass');
mc.log("hello world");

var port = 8081;

webapp.use('/js', express.static(__dirname));
webapp.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '/index.html'));
});

server.listen(process.env.PORT || port, function () {
    console.log('Listening on ' + server.address().port);
});

-myclass.ts

namespace sample {
    export class myclass extends scripts.myabstractclass {

    }
}

-myabstractclass.ts

namespace scripts {
    export class myabstractclass {
        public log(val: string): void {
            console.log(val);
        }
    }
}

标签： node.jstypescriptbrowser

解决方案

谢谢@estus，我确实接受了您的建议，并为仅 UI 类（在我的主项目中）抽象出了文档和 jquery 元素。

我对我最终采用的方法感到满意（尽管它可能被认为是骇人听闻的）。我基本上在每个文件的底部使用 module.exports，并将所有内容设置为全局范围。然后我将文件包含一次，并且可以declare var在我需要导入的任何地方进行设置，因为我将所有内容都设置为特定于全局范围的内容，所有内容在我第一次调用后都存在。最好的部分，现在我需要的文件是可重用的。

这是我更新的文件，它既适用于节点，也适用于使用打字稿的浏览器。

--index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

</head>
<body>
    <script type="text/javascript" src="/js/myabstractclass.js"></script>
    <script type="text/javascript" src="/js/myclass.js"></script>
    <script>
        var myclass = new sample.myclass();
        myclass.log("hello world");
    </script>
</body>
</html>

--nodeserver.ts

require('./required');

declare var webapp;
declare var express;
declare var server;
declare var path;
declare var myclass;

var m = new sample.myclass();
m.log('hello world');


var port = 8081;

webapp.use('/js', express.static(__dirname));
webapp.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '/index.html'));
});

server.listen(process.env.PORT || port, function () {
    console.log('Listening on ' + server.address().port);
});

--myclass.ts

namespace sample {
    export class myclass extends scripts.myabstractclass {

    }
}

if (typeof (module) != 'undefined') {
    module.exports = sample.myclass;
}

--myabstractclass.ts

namespace scripts {
    export class myabstractclass {
        public log(val: string): void {
            console.log(val);
        }
    }
}

if (typeof (module) != 'undefined') {
    module.exports = scripts.myabstractclass;
}

--required.ts

global.express = require('express');
global.webapp = express();
global.path = require('path');
global.server = require('http').Server(webapp);
global.scripts = {};
global.scripts.myabstractclass = require('./myabstractclass');
global.sample = {};
global.sample.myclass = require('./myclass');

推荐阅读