我们将使用 babel 去编译 TypeScript，babel 在编译 TypeScript 代码是直接去掉 TypeScript 的类型，然后当成普通的 javascript 代码使用各种插件进行编译，tsc 并没有介入编译过程，因此 tsconfig.json 中很多选项例如 target 和 module 是没有用的，可以让 VSCode 等编辑器正确提示错误
在项目中使用ts
yarn add typescript -D
// 新建 tsconfig.json 文件，进行ts 配置

通过babel来编译ts文件
yarn add babel-loader @babel/core @babel/preset-typescript -D
在babel.config.js 中配置

module.exports = function (api) {

api.cache(true);

const presets = ['@babel/preset-typescript'];

const plugins = [];

return {     presets,     plugins,   };

};

在webpack 中配置 babel-loader

{

test: /.(tsx?|js)$/,

loader: 'babel-loader',

// 开启缓存

options: { cacheDirectory: true },

exclude: /node_modules/,

}