[英]How to Call Typescript Function From Index.html?
我有一个输入元素,它尝试在 onchange 事件期间调用 typescript function。 但是它不起作用,我收到以下错误: inputChange is not defined
。 在我的 main.ts 文件中,我有一个名为 inputChange 的简单 function,它只是控制台日志“Hello World.”。
// 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"]
}
这是不使用onxyz
样式事件处理程序的众多原因之一:它们要求您使用的 function 必须是全局的。 听起来您已将 TypeScript 设置为使用模块,因此 TypeScript 文件中的顶级声明不是全局变量。
相反,使用 JavaScript 将处理程序连接到输入,通过它在 DOM 中的位置、它的 class 或其 ID 来识别输入。 例如,这是一个使用 ID 的示例:
<input id="the-input">
在定义inputChange
的模块(或导入它的另一个模块)中的 TypeScript 代码中:
document.getElementById("the-input").addEventListener("change", inputChange);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.