TS2339：类型“ HTMLElement”上不存在属性“ xxxx”

Question

在Typescript中操作DOM元素时遇到此问题。

我在stackoverflow上尝试了最有答案的方法：

let ele: HTMLImageElement = document.getElementById("img") as HTMLImageElement

但是在编译时仍然会收到错误消息：

不确定为什么？我的Typescript配置错误吗？

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "lib": ["es5", "es6", "dom"],
    "alwaysStrict": true,
    "allowSyntheticDefaultImports": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

此处的项目代码：https://github.com/mashirozx/sakura2

Answer 1

我认为这可能是问题所在（来自您的webpack.config.js）：

      {
        test: /\.tsx?$/,
        use: [
          { loader: 'ts-loader' },
          { 
            loader: 'babel-loader',
            query: {
              presets: ['@babel/preset-typescript'],
            },
          },
        ],
        exclude: /node_modules/
      }

通常，您将使用 tsem-loader 或 babel-loader，而不是两者。我注意到，从项目中删除其中任何一个都可以使您的代码按预期运行。请注意，您仍然可以同时使用两者，但我想从您怀疑的Babel配置中删除TypeScript预设。

Answer 2

也许不是一个好主意，但是我发现xxx['xxx']可以起作用：

let ele: HTMLImageElement = document.getElementById("cover-img") as HTMLImageElement
let eleW: number = ele['naturalWidth']
console.log(eleW)