从 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构建app，但是构建出来的文件不能调用函数，记录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;

Codesandbox

Answer 2

不要直接从index.html 文件中引用index.ts，而是尝试像这样指向/dist 中的已编译文件：

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

正如您所说的，TypeScript 只是 JavaScript 的超集，您的浏览器无法解释 - 只有在将其编译为 JavaScript 之后。