[英]How to Call Typescript Function From Index.html?
I've got an input element which tries calling a typescript function during the onchange event.我有一个输入元素,它尝试在 onchange 事件期间调用 typescript function。 However it doesn't work and I get the following error:
inputChange is not defined
.但是它不起作用,我收到以下错误:
inputChange is not defined
。 In my main.ts file, I've got a simple function called inputChange which just console logs "Hello World.".在我的 main.ts 文件中,我有一个名为 inputChange 的简单 function,它只是控制台日志“Hello World.”。
// index.html
<input onchange="inputChange()"/>
// main.ts
function inputChange(){
console.log('Hello World!')
}
Does anyone know how I can access functions like inputChange from my index.html file?有谁知道我如何从我的 index.html 文件访问像 inputChange 这样的函数? (Also everything else in my main.ts file works as normal but for some reason I can't access typescript functions/variables from index.html)
(我的 main.ts 文件中的其他所有内容都正常工作,但由于某种原因我无法从 index.html 访问 typescript 函数/变量)
I'm using webpack and babel to compile the typescript file into a bundle.js which is then appended into my index.html file by HTMLWebpackPlugin.我正在使用 webpack 和 babel 将 typescript 文件编译成 bundle.js,然后通过 HTMLWebpackPlugin 将其附加到我的 index.html 文件中。
This is my tsconfig file:这是我的 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"]
}
This is one of the many reasons not to use onxyz
-attribute-style event handlers: They require that the function you use has to be a global.这是不使用
onxyz
样式事件处理程序的众多原因之一:它们要求您使用的 function 必须是全局的。 It sounds like you have TypeScript set up to use modules, so top-level declarations in TypeScript files aren't globals.听起来您已将 TypeScript 设置为使用模块,因此 TypeScript 文件中的顶级声明不是全局变量。
Instead, hook up the handler to the input using JavaScript, identifying the input via where it is in the DOM, its class, or its ID.相反,使用 JavaScript 将处理程序连接到输入,通过它在 DOM 中的位置、它的 class 或其 ID 来识别输入。 For instance, here's an example using an ID:
例如,这是一个使用 ID 的示例:
<input id="the-input">
and in your TypeScript code in the module where inputChange
is defined (or another module that imports it):在定义
inputChange
的模块(或导入它的另一个模块)中的 TypeScript 代码中:
document.getElementById("the-input").addEventListener("change", inputChange);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.