如何从Index.html调用Typescript函数

Question

我有一个输入元素，它试图在onchange事件期间调用typescript函数。但是它不起作用，我得到以下错误：inputChange is not defined。在我的main.ts文件中，我有一个名为inputChange的简单函数，它只是控制台日志"；你好，世界&"；。

// index.html    
<input onchange="inputChange()"/>
// main.ts
function inputChange(){
console.log('Hello World!')
}

有人知道我如何从index.html文件中访问inputChange之类的函数吗？(此外，我的main.ts文件中的其他一切都正常工作，但由于某种原因，我无法从index.html访问typescript函数/变量(

我使用webpack和babel将typescript文件编译成bundle.js，然后通过HTMLWebpackPlugin将其附加到我的index.html文件中。

这是我的tsconfig文件：

{
"compilerOptions": {
/* Basic Options */
"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["es6","dom"],                             /* Specify library files to be included in the compilation. */
"allowJs": false,                       /* Allow javascript files to be compiled. */
"sourceMap": true,                     /* Generates corresponding '.map' file. */
/* Strict Type-Checking Options */
"strict": true,                           /* Enable all strict type-checking options. */
"noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true,              /* Enable strict null checks. */
"strictFunctionTypes": true,           /* Enable strict checking of function types. */
"strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
"strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
"noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
"alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
"noUnusedLocals": false,          /* annoying when just testing */                // "noUnusedLocals": false,                /* Report errors on unused locals. */
"noUnusedParameters": false,      /* annoying when just testing */                 // "noUnusedParameters": true,            /* Report errors on unused parameters. */
"noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Advanced Options */
"skipLibCheck": true,                     /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
},
"compileOnSave": true,
"exclude": ["node_modules"],
"include": ["./public"]
}

Answer 1

这是不使用onxyz属性风格事件处理程序的众多原因之一：它们要求您使用的函数必须是全局函数。听起来您已经将TypeScript设置为使用模块，因此TypeScript文件中的顶级声明不是全局声明。

相反，使用JavaScript将处理程序连接到输入，通过它在DOM中的位置、它的类或它的ID来识别输入。例如，下面是一个使用ID:的示例

<input id="the-input">

在定义inputChange的模块(或导入它的另一个模块(中的TypeScript代码中：

document.getElementById("the-input").addEventListener("change", inputChange);