Question

我正在结合TypeScript和React进行我的第一个项目，但是在使一个简单的测试项目开始工作时，我遇到了一些主要问题。

当前，我正在使用以下（package.json）：

{
  "name": "proxied-client",
  "version": "1.0.0",
  "description": "MTG proxies, powered by React/Apollo.",
  "main": "main.ts",
  "scripts": {
    "dev": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-env": "^7.0.0-beta.56",
    "@types/react": "^16.4.7",
    "@types/react-dom": "^16.0.6",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-hot-loader": "^4.3.4"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.56",
    "@babel/plugin-syntax-decorators": "^7.0.0-beta.56",
    "@babel/plugin-syntax-jsx": "^7.0.0-beta.56",
    "@babel/plugin-syntax-typescript": "^7.0.0-beta.56",
    "@babel/preset-env": "^7.0.0-beta.56",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "react-hot-loader": "^4.3.4",
    "source-map-loader": "^0.2.3",
    "typescript": "^3.0.1",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

当我尝试使用npm run dev启动项目时，出现以下错误提示：

ERROR in [at-loader] ./src/index.tsx:15:33
    TS7006: Parameter 'obj' implicitly has an 'any' type.

ERROR in [at-loader] ./src/index.tsx:17:10
    TS2393: Duplicate function implementation.

ERROR in [at-loader] ./src/index.tsx:17:34
    TS7006: Parameter 'obj' implicitly has an 'any' type.

ERROR in [at-loader] ./src/index.tsx:17:202
    TS7017: Element implicitly has an 'any' type because type '{}' has no index signature.

ERROR in [at-loader] ./src/index.tsx:17:237
    TS2339: Property 'default' does not exist on type '{}'.

ERROR in [at-loader] ./src/components/Hello.tsx:7:60
    TS7006: Parameter 'target' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:7:68
    TS7006: Parameter 'props' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:7:368
    TS7006: Parameter 'Constructor' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:7:381
    TS7006: Parameter 'protoProps' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:7:393
    TS7006: Parameter 'staticProps' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:13:10
    TS2393: Duplicate function implementation.

ERROR in [at-loader] ./src/components/Hello.tsx:13:34
    TS7006: Parameter 'obj' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:13:202
    TS7017: Element implicitly has an 'any' type because type '{}' has no index signature.

ERROR in [at-loader] ./src/components/Hello.tsx:13:237
    TS2339: Property 'default' does not exist on type '{}'.

ERROR in [at-loader] ./src/components/Hello.tsx:15:26
    TS7006: Parameter 'instance' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:15:36
    TS7006: Parameter 'Constructor' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:17:37
    TS7006: Parameter 'self' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:17:43
    TS7006: Parameter 'call' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:19:20
    TS7006: Parameter 'subClass' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:19:30
    TS7006: Parameter 'superClass' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Hello.tsx:25:14
    TS7023: 'Hello' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

ERROR in [at-loader] ./src/components/Hello.tsx:28:56
    TS2339: Property '__proto__' does not exist on type '() => any'.

ERROR in [at-loader] ./src/components/Hello.tsx:31:5
    TS2554: Expected 3 arguments, but got 2.

我不完全确定问题出在哪里，我在这里到那里都遵循了一些文档，并且我有适当的依赖关系（我认为），包括使用我认为是React / ReactDOM的类型。正确的语法。

我觉得在代码的某个时刻，我需要在文档遗漏的某些东西上显式设置类型，但是我有点迷失了（一般来说是TypeScript的新手，但是我在绊脚石它）。

这是应用程序（index.tsx）的入口点：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import Hello from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById('root')
);

这是我尝试渲染的组件：

import * as React from 'react';

interface HelloProps {
    compiler: string,
    framework: string,
}

interface State {
    counter: number
}

class Hello extends React.Component<HelloProps, State> {
    render(): JSX.Element {
        return (
            <h2>Greetings from {this.props.compiler} and {this.props.framework}!</h2>
        )
    }
}

export default Hello;

这是我当前正在使用的webpack配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: ['./src/index'],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ['awesome-typescript-loader', 'babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
            react: path.resolve(path.join(__dirname, './node_modules/react')),
            'babel-core': path.resolve(path.join(__dirname, './node_modules/@babel/core'))
        }
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

我只是想弄清楚我可能做错了什么。

有什么想法吗？

Answer 1

正在发生错误，因为正在使用babel对代码进行编译，然后将已编译的代码馈送到AT加载程序中。由于您正在使用Babel进行转译，因此这里无需将AT加载程序混入其中。从您的Webpack规则中删除它：

    rules: [
        { test: /\.tsx?$/, use: ['babel-loader'] }
    ]

当然，您仍然希望保留tsconfig，并且可以在命令行上运行tsc --noEmit进行类型检查，而无需进行编译。

使用TypeScript + React时出现多个错误

1 个答案: