Webpack with typescript getting TypeScript emitted no output error

I've got this configuration from https://www.npmjs.com/package/ts-loader:

webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: "./src/Api.ts",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
};

./src/Api.ts:

export class Api {
...
}

But when I run webpack I get:

Error: TypeScript emitted no output for Api.ts

Check that you don't have noEmit set to true In your tsconfig.json file.

First change webpack config entry like index.js to index.tsx. Second make sure rule added for tsx file like:

{
  test: /\.(ts|js)x?$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript",
      ],
    },
  },
},