将TypeScript添加到现有的React项目（不是create-react-app）

Question

我一直到处寻找一个地方，告诉我如何将tsx编译器添加到现有的react项目中。这不是一个create-react-app。是否可以在同一项目中同时使用TSX和JSX文件？我不想在TSX中做任何事情，但是我绝对想得到一些练习，并且不想转换整个东西。你们有什么地方可以找吗？这是我的webpack.config供参考（如果您知道我可以添加lmk的方法）

版本：“反应”：“ ^ 16.8.1”，

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {


    devtool: 'inline-source-map',

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "/static/cs/styles.css",
            chunkFilename: "styles.css"
        })


    ],

    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'static/js/bundle.js'
    },
    module: {

        rules: [

            {
                test: /\.s?css$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },

            {
                use: { loader: 'babel-loader' },
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: '',
                        },
                    }

                ]
            },


        ]
    },

    devServer: {

        contentBase: path.join(__dirname, 'build'),

    },


}