从 HTML 输入 onchange 属性调用在 TypeScript 文件中定义的函数

Question

如果我有一个这样的 JavaScript index.js文件：

function foo(val) {
  console.log(val);
}

和一个index.html HTML 文件，如下所示：

...
<script src="./index.js"></script>
<div id="container">
  <label>bar
    <input type="radio" name="radio" value="bar" onchange="foo(value);"/>
  </label>
  <label>baz
    <input type="radio" name="radio" value="baz" onchange="foo(value);"/>
  </label>
...

当我检查单选按钮时，这会记录bar或baz 。

我想调用在index.ts TypeScript 文件中定义的foo(value) ，如下所示：

let foo = (value: string): void => {
  console.log(value);
};

在index.html 中，我将<script src="./index.js"></script>更改为<script src="./src/index.ts"></script> ，然后我使用parcel 来构建应用程序，但生成的构建文件无法调用该函数，记录referenceError: setLayer is not defined 。

我知道理论上浏览器对 TypeScript 一无所知，只知道 JavaScript，但是在我的 dist 目录中使用 Parcel 编译后，我看到一堆*js文件，我认为其中一个文件可能包含已编译的foo()函数.

所以问题是：如何像使用 JS 文件一样从 HTML 输入 onchange 属性调用 TS 文件中的函数？

最后但并非最不重要的一点：为了构建我的应用程序，我调用了parcel start （甚至是parcel run build ），我的package.json如下所示：

{
  "name": "app_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:build": "tsc -w",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "typescript": "^3.7.5"
  }
}

Answer 1

问题：

像 Parcel 和 Webpack 这样捆绑你的 js 的工具将你的所有模块包装在 IIFE 中，所以在 Parcel 处理你的index.ts ，函数foo不是全局的，你不能再从你的 html 文件中简单地访问它了。 没有处理（比如在这种情况下： <script src="./index.js"></script> ） foo是全局的。

解决方案：

使foo全球化。

// index.ts
function foo(val: string) {
  console.log(val);
}

window.foo = foo;

代码沙盒

Answer 2

不要直接从index.html文件中引用index.ts而是尝试指向/dist的编译文件，如下所示：

<script src="dist/index.js"></script>

正如您正确指出的那样，TypeScript 只是 JavaScript 的超集，您的浏览器无法解释它 - 只有在将其编译为 JavaScript 之后。