TypeScript 项目中缺少基本的 DOM 类型

Posted

技术标签:

【中文标题】TypeScript 项目中缺少基本的 DOM 类型【英文标题】:Missing basic DOM types in TypeScript project 【发布时间】:2017-07-25 00:48:21 【问题描述】:

我正在使用 TypeScript 设置一个网络应用程序,但我似乎缺少一些我需要的基本类型。

当我编译 (npm run build) 时,出现以下错误,

错误 TS2304:找不到名称“htmlElement”。

错误 TS2304:找不到名称“SVGElement”。

错误 TS2304:找不到名称“EventTarget”。

错误 TS2304:找不到名称“TouchEvent”。

错误 TS2304:找不到名称“MouseEvent”。

错误 TS2304:找不到名称“PointerEvent”。

根据我的谷歌搜索,我假设我在项目设置中缺少一些基本内容。似乎这些类型只是假设与 Typescript 一起存在。

编辑:特别是它应该是 ES6 类型的一部分,https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es6.d.ts。

这是我的package.json 文件:


  "name": "wip",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "dependencies": 
    "hammerjs": "2.0.8"
  ,
  "devDependencies": 
    "@types/chai": "3.4.35",
    "@types/mocha": "2.2.39",
    "@types/node": "7.0.5",
    "@types/hammerjs": "2.0.34",
    "chai": "3.5.0",
    "mocha": "3.2.0",
    "safe-mock": "0.2.0",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typescript": "2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  ,
  "scripts": 
    "test": "mocha test --require ts-node/register test/**/*.ts && npm run build",
    "dev": "webpack-dev-server --watch --content-base . -d --progress",
    "build": "tsc"
  ,
  "author": "",
  "license": "ISC"

有什么建议吗?

【问题讨论】:

npm run-script build这个命令你试过了吗? @Smit,是的,这就是导致编译时间类型错误的命令 【参考方案1】:

额外的测试答案。

如果使用 mocha,还需要使用jsdom 告诉 mocha DOM 环境。

https://journal.artfuldev.com/unit-testing-node-applications-with-typescript-using-mocha-and-chai-384ef05f32b2

$ npm install jsdom jsdom-global --save-dev

所以你的“测试”脚本会添加-r jsdom-global/register:


  "scripts": 
    "test": "mocha test -r ts-node/register -r jsdom-global/register test/**/*.ts && npm run build"
  

【讨论】:

【参考方案2】:

尝试将以下lib 部分添加到您的tsconfig.json 文件中。


    "compilerOptions": 
        "lib": [
            "es2016",
            "dom"
        ]
    

【讨论】:

修复它,谢谢!虽然我使用es6 而不是es2016。奇怪的是我需要这样做,因为我的 node_modules 目录中有类型。 目前这是正确的解决方案,但请注意这一点。如果您使用未在该文件中定义的变量“事件”,您的构建不会失败,因为 lib.dom.d.ts 声明了“事件”以及许多其他非常常见的变量名称。

以上是关于TypeScript 项目中缺少基本的 DOM 类型的主要内容,如果未能解决你的问题,请参考以下文章

Typescript + Webpack 项目中缺少源映射

编译没有 DOM 声明的 Typescript

react-router-dom v6 TypeScript withRouter用于类组件[重复]

深入浅出TypeScript- 在React项目中使用TypeScript

在本地引用 TypeScript dom lib 类型

typescript+reactjs+requirejs:如何将 react-dom 导入 typescript