將 Typescript 添加到現有的 React、Webpack 和 Babel 項目中

Question

我正在嘗試將 Typescript 添加到當前的 React、Webpack 和 Babel 項目中。 我希望能夠在我的項目中支持諸如[.js, .ts, .tsx]文件類型，因為我想連續遷移到 Typescript。

我已經取得了一些進展，但目前，我無法解決此錯誤：

我也不是 100% 確定我是否需要保留 Babel，或者我是否可以在此設置完成后將其刪除。

我的tsconfig.json看起來像這樣：

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6", "dom", "esnext.asynciterable", "es2015"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        // "noEmit": true,
        "strictNullChecks": true,
        // "noImplicitAny": false,
        "jsx": "preserve"
    },
    "include": ["src"],
    "exclude": ["node_modules", "build", "scripts", "jest"]
}

我的webpack.conf.js在這里： https : webpack.conf.js

所有的幫助都非常感謝，因為我很困。

謝謝！

Answer 1

webpack.config.js 示例：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      { test: /\.tsx?$/, loader: 'ts-loader' },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    hot: true,
  },
}

另外，在 tsconfig 中：

{
  ...
  "jsx": "react",
  ...
}

全文： 這里