Javascript 如何从.ts文件中调用TypeScript函数？

我有一个非常简单的程序来学习如何使用TypeScript，我使用Browserify捆绑了我所有的

.ts

文件，使其能够在浏览器中运行

想象一下TypeScript中非常简单的变量声明：

main.ts
let testVar = "Something";

下面是我要编译的

gulpfile.js

（需要时打包文件）：

这是我的

tsconfig.json

{
  "compilerOptions": {
    "module": "system",
    "sourceMap": true,
    "lib": ["dom", "es2015.promise", "es5"],
    "noImplicitAny": true,
    "target": "es2015"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ],
  "files": [
    "src/**/*"
  ]
}

构建任务按预期工作，我在typescript中的内容也工作得很好。但是，当我在.html文件中包含绑定和编译的文件，并试图访问testVar变量时。只需在Chrome控制台中轻松调用，

console.log（testVar）但返回错误：

未捕获引用错误：未定义testVar

下面是编译+捆绑的
.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){
let testVar = "Something";
},{}]},{},[1])

//# sourceMappingURL=main.js.map

代码>（函数e（t，n，n，r）若（t，t，n，n，r）若（t（t，t，n，n，r）若（t（t，t，n，n，n，r）若（t，n，n）若（t，n，n）若（t，n，n，r）若（t）若（t）若（t（t，n，n，n，n，r）若）若（t，（t，n，n，n，n，n，n，r）若）若（t，（t（t，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，r）若）若（t，（t）若（t，（t，n，n，（t，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n）若r）}返回n[o] .exports}var i=typeof require==“函数”&&require；for（var o=0；o
如何用TypeScript设计我的库的API？（任何好的资源）

这确实是一个构建工具链的问题。如果您想将库公开为全局库，答案取决于您的工具链。我建议使用
webpack
。以下是一个示例配置：

module.exports = {
    /** Build from built js file */
    entry: {
      typestyle: './lib/index.js',
    },
    output: {
        filename: './umd/typestyle.js',
        libraryTarget: 'umd',
        /** The library name on window */
        library: 'typestyle'
    }
};

从

如何用TypeScript设计我的库的API？（任何好的资源）

这确实是一个构建工具链的问题。如果您想将库公开为全局库，答案取决于您的工具链。我建议使用
webpack
。以下是一个示例配置：

module.exports = {
    /** Build from built js file */
    entry: {
      typestyle: './lib/index.js',
    },
    output: {
        filename: './umd/typestyle.js',
        libraryTarget: 'umd',
        /** The library name on window */
        library: 'typestyle'
    }
};

从.
中，您的代码应该可以正常工作，您只需将standalone添加到Browserify配置中即可

这应该是您在Gulp上的Browserify任务：

 return browserify({
        standalone: "yourLib",
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {},
    })

请看独立版：“yourLib”

---

现在您需要导出

main.ts

文件中的某些内容，例如：

//main.ts
export function whatsYourName(name:string){
 console.log(name);
}

现在只需运行gulp

build

任务（它将编译和浏览/捆绑您的ts文件），将捆绑的脚本包含到页面中，打开Chrome控制台（F12），在控制台选项卡内，只需在

browserify

任务中写入您为

独立

定义的名称（这里我们将其命名为

yourLib

）

对于我们的示例，您只需在控制台中键入以下内容即可获得响应：

yourLib.whatsYourName("Alex");

---

您的代码应该按预期工作，您只需要将standalone添加到Browserify配置中

这应该是您在Gulp上的Browserify任务：

 return browserify({
        standalone: "yourLib",
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {},
    })

请看独立版：“yourLib”

---

现在您需要导出

main.ts

文件中的某些内容，例如：

//main.ts
export function whatsYourName(name:string){
 console.log(name);
}

现在只需运行gulp

build

任务（它将编译和浏览/捆绑您的ts文件），将捆绑的脚本包含到页面中，打开Chrome控制台（F12），在控制台选项卡内，只需在

browserify

任务中写入您为

独立

定义的名称（这里我们将其命名为

yourLib

）

对于我们的示例，您只需在控制台中键入以下内容即可获得响应：

yourLib.whatsYourName("Alex");

---

你确定变量名仍然是testVar，因为它看起来像是缩小了你的代码。@NicoVanBelle，是的，它仍然是testVar你确定变量名仍然是testVar，因为它看起来像是缩小了你的代码。@NicoVanBelle，是的，它仍然是testVar我们不能使用CommonJs/system，也不能访问变量和函数吗tions？我在TypeScript项目网站上找到了tsconfig和gulpfile配置，用于捆绑文件…但他们没有提到当我们包含在浏览器中时如何使用ts功能。你能描述更多吗？我看到人们谈论Commonjs模块，我的也是Commonjs，但它在浏览器中不工作，ou中没有错误t输出，但我不知道如何运行它！@TypeScriptLearner我也有同样的问题，请看我的答案，这解决了我的问题。@M98谢谢，我认为Web包中的libraryTarget与browserify中的standalone相同。难道我们不能使用CommonJs/system，也可以访问变量和函数吗？我找到了Tconfig和gulpfile从TypeScript项目网站上配置，用于捆绑文件…但是他们没有提到当我们包含在浏览器中时如何使用ts功能。你能描述更多吗？我看到人们谈论Commonjs模块，我的也是Commonjs，但它在浏览器中不工作，输出没有错误，但我不知道如何运行它！@typeScriptLearner我也遇到了同样的问题，请看我的答案，这解决了我的问题。@M98谢谢，我认为Webpack中的libraryTarget与browserify中的standalone相同。我是否能够向库中添加一个带有静态函数的类？我对JS和TypeScript不熟悉，想调用JS文件中的静态函数：

var test=MyClass.doSomething（）；

MyClass位于类似“MyClass.ts”的TypeScript文件中，将通过browserify进行捆绑和缩小。我是否能够将带有静态函数的类添加到库中？我对JS和TypeScript不熟悉，希望在我的JS文件中调用静态函数：

var test=MyClass.doSomething（）；

MyClass位于类似“MyClass.ts”的类型脚本文件中，将通过browserify进行捆绑和缩小。