Question

这是我的package.json中的依赖项。这曾经在我过去工作过。

"target": "es5",
"lib": ["es6"],
"module": "commonjs",
"jsx": "react",
"sourceMap": true,
"outDir": "./build",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./src",
"esModuleInterop": true

我的tsconfig.js看起来像

yarn start

当我ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72 TS2304: Cannot find name 'Text'. ERROR in [at-loader] ./src/index.tsx:6:28 TS2304: Cannot find name 'document'.时，我收到错误

"target": "es6",
"lib": ["es6"],
"jsx": "react",

我上周用这个相同的package.json创建了一个应用程序，它没有这些错误。

编辑::基于下面的答案，我尝试了两件事

tsconfig.js

ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72
    TS2304: Cannot find name 'Text'.

ERROR in [at-loader] ./src/index.tsx:5:28
    TS2304: Cannot find name 'document'.

现在，当我开始纱线时，我得到错误

"target": "es5",
"lib": ["es6", "dom"],
"module": "commonjs",

我也试过

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2381:15
    TS2300: Duplicate identifier 'URL'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2399:15
    TS2300: Duplicate identifier 'URLSearchParams'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:14
    TS2661: Cannot export 'URL'. Only local declarations can be exported from a module.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:19
    TS2661: Cannot export 'URLSearchParams'. Only local declarations can be exported from a module.
Child html-webpack-plugin for "index.html":

现在我收到错误

'w'

Answer 1

这可能是由tsconfig.json中的以下设置引起的：

...
"target": "es5",
"lib": ["es6"],   <- right here
...

在这里，您明确告诉tsc您希望es5 javascript（target配置）。同时，您说要包含es6内置类型声明（以及es6内置类型声明仅）。

现在，这本身不是问题，tsc将允许你这样做（虽然我会辩论这一点：你的代码将在非es6浏览器上破解，除非你在你的构建中提供polyfill管道）。但是，如果您明确告诉tsc您想要的lib，则必须确保不要忘记应用中需要的任何类型。简而言之，如果您想使用Typescript创建Web应用程序，通常还需要dom声明才能访问DOM接口类型，例如document或Text 。打字稿开发人员决定模块化内置的库定义starting in typescript 2（想想DOM类型声明没有意义的上下文，比如开发一个node.js app！）。

以下是我建议您更改tsconfig.json：

的方法

"target": "es6",
"module": "commonjs",
"jsx": "react",
...

摆脱lib将为您提供默认值："lib": ["es6", "dom"]（取决于您设置的target）。由于您似乎想在项目中使用es6，因此请将其设置为您的转换目标。

如果您希望将es5作为目标，并希望明确lib，那么这应该会使您的应用编译（但由于上述原因，我不建议这样做）

"target": "es5",
"lib": ["es6", "dom"]
"module": "commonjs",
"jsx": "react",
...

Answer 2

我去了打字稿的gitter频道并在那里问了问题。我找到了一个有效的解决方案，我将其列在此处。

我需要将@types/node版本9添加到我的package.json中。所以工作package.json看起来像

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": "https://github.com/abhsrivastava/login-ts-react.git",
  "author": "Abhishek Srivastava <abhsrivastava@foo>",
  "license": "MIT",
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@types/react": "^16.3.13",
    "@types/node": "9.6.7", // <- right here
    "@types/react-bootstrap": "^0.32.9",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.21.0",
    "typescript": "^2.8.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }
}

并且tsconfig.json看起来像

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom"], // <- right here
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true, 
    "outDir": "./build",
    "removeComments": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./src",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Answer 3

确保对带有html标记的文件使用.tsx。

React TypeScript应用程序获取'TS2304：找不到名称'文本'。'

3 个答案: