Nodejs 中 Typescript 到底应该怎么转换 DOM 对象类型？

Nodejs 中 Typescript 到底应该怎么转换 DOM 对象类型？

编译报错 TS2339: Property ‘xxxx’ does not exist on type ‘HTMLElement’

尝试过

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

可是依然报错：

image

是我的 ts 配置不对吗？

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

Package 完整代码：https://github.com/mashirozx/sakura2


11 回复

标题描述可能不太妥当，应当是 HTML 对象 --题主补充


你是要用里面的东西吗 直接 xxx[‘xxx’]

#2 原来是这样，太感谢了！

anyscript

我这里怎么不报错？？？

const ele = document.querySelector(’#cover-img’) as HTMLImageElement
const eleW: number = ele.naturalWidth
console.log(eleW)

另外二楼的直接[‘xxx’]是个什么鬼，这不是一样的，写起来还麻烦

any 大法好

#6 找到原因了，之前 ts 文件同时用了 ts-loader 和 babel-loader，删掉其中一个就正常啦~

本贴不用回复啦~

as unknown as TheType

你自己知道是对的就行

#9 哈哈

在 Node.js 环境中使用 TypeScript 时，由于 Node.js 本身是基于服务器端的，不直接操作浏览器端的 DOM 对象，因此转换 DOM 对象类型的需求通常出现在使用一些模拟 DOM 库（如 jsdom）或者在 TypeScript 中定义与 DOM 相关的接口和类型时。

下面是一个如何在 Node.js 中使用 TypeScript 和 jsdom 来模拟 DOM 环境的例子，并展示如何转换 DOM 对象类型：

  1. 首先，安装 jsdom 和 [@types](/user/types)/jsdom：

    npm install jsdom [@types](/user/types)/jsdom

  2. 接下来，在 TypeScript 文件中使用 jsdom：

    import { JSDOM } from 'jsdom';

const { window } = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);

const document = window.document;
const paragraph: HTMLElement = document.querySelector('p')!;

console.log(paragraph.textContent); // 输出: Hello world

// 定义一个与 DOM 相关的接口
interface MyElement extends HTMLElement {
    customProperty: string;
}

const myElement = paragraph as MyElement;
myElement.customProperty = 'custom value';
console.log(myElement.customProperty); // 输出: custom value

在这个例子中，我们使用了 jsdom 来创建一个 DOM 环境，并查询了一个段落元素。然后，我们演示了如何将这个元素转换为自定义的 MyElement 类型，并添加了一个自定义属性。注意，使用类型断言（as 关键字）来转换类型时，要确保这种转换在逻辑上是安全的。

回到顶部