ts-loader用于TypeScript 加载器，将 TypeScript(ES6) 编译成 JavaScript(es6)。而Typescript没有做polyfills,所以要编译成ES5依旧得要babel-loader。

ts-loader结合webpack使用如下：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
             //……
            }
          }
        ]
      }
    ]
  }
}

在对比过程中，百度过其他的加载器，如awesome-typescript-loader

awesome-typescript-loader相对ts-loader编译速度更快，不需要按照其他独立的插件，和webpack接结合如下：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'awesome-typesscript-loader',
            //……
          }
        ]
      }
    ]
  }
}

最后，我们更推荐用babel-loader,babel本身是移除了ts,因为Babel 具备缓存和单文件散发架构能力，Babel配合TypeScript 会提供了更快的编译。这是 Babel 在编译过程中剥离 TypeScript 的第一个优势。而Babel一般采用预编译的方式，也就是babel在起初编译剥离了ts,ts的类型检查在项目启动好的时候才进行，这就是第二优势，也是bable编译速度比较快的原因。

推荐加载器如下配置：

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

测试版本如下：

{
"@babel/core": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.17.12",
"@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.18.6",
"@babel/runtime-corejs2": "^7.18.3",
"@types/react-transition-group": "^4.4.5",
}