如何從 Index.html 調用 Typescript Function？

Question

我有一個輸入元素，它嘗試在 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"]
}

Answer 1

這是不使用onxyz樣式事件處理程序的眾多原因之一：它們要求您使用的 function 必須是全局的。 聽起來您已將 TypeScript 設置為使用模塊，因此 TypeScript 文件中的頂級聲明不是全局變量。

相反，使用 JavaScript 將處理程序連接到輸入，通過它在 DOM 中的位置、它的 class 或其 ID 來識別輸入。 例如，這是一個使用 ID 的示例：

<input id="the-input">

在定義inputChange的模塊（或導入它的另一個模塊）中的 TypeScript 代碼中：

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