webpack构建TypeScript时HTMLSelectElement报错及TS2339错误如何解决

问题根源 #

你的 Webpack 配置未配置 TypeScript 对应的编译 loader，无法识别 TS 特有的 as 类型断言语法，所以遇到 HTMLSelectElement 相关的类型断言就会抛出模块解析失败的错误。而 as HTMLSelectElement 这个断言是必要的：document.getElementsByName 返回的元素默认类型是 HTMLElement，本身不存在 options 属性，移除断言必然触发 TS 类型校验错误。

解决步骤 #

1. 安装必要依赖
   如果项目还没有安装 ts-loader，执行以下命令安装：

npm install ts-loader typescript --save-dev

2. 修改 webpack.config.js 配置
   在配置中添加 TS 文件的解析规则和扩展名识别，修改后的完整配置如下：

const webpack = require('webpack');

module.exports = {
    entry: './Scripts/index.ts',
    output: {
        path: __dirname + "/wwwroot/js",
        filename: 'bundle.js'
    },
    // 新增扩展名配置，导入ts文件时可省略后缀
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            // 新增TS文件处理规则
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
        ],
    },
    mode: 'production',
    devtool: 'eval-cheap-source-map',
    optimization: {
        usedExports: true,
    }
};

3. 重新执行构建命令即可，两个错误都会同时解决。

内容的提问来源于stack exchange，提问作者peter p