配置tsconfig.js配置文件

略，参考其他文章

前置依赖

npm install —save typescript @types/node @types/react @types/react-dom @types/jest

webpack配置TypeScript相关loader

方法一

Webpack集成非常简单。您可以使用awesome-typescript-loaderTypeScript加载器，source-map-loader以便于调试

npm install awesome-typescript-loader source-map-loader typescript

webpack.config.js

const { CheckerPlugin } = require('awesome-typescript-loader')
module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "./dist/bundle.js",
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.(tsx|ts)?$/, loader: "awesome-typescript-loader" }
        ],
        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    plugins: [
          new CheckerPlugin()
      ]
    // Other options...
};

方法二

webpack.config.js

npm install ts-loader typescript —save-dev

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.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|ts)?$/, loader: "ts-loader" }
    ]
  }
};

转到TypeScript文件

• 需要配置tsconfig.json文件

此时，您可能已准备好开始使用TypeScript文件。第一步是将您的一个.js文件重命名为.ts。如果您的文件使用JSX，则需要将其重命名为.tsx。
完成那一步？大！您已成功将文件从JavaScript迁移到TypeScript！
当然，这可能感觉不对。如果您在具有TypeScript支持的编辑器中打开该文件（或者如果您运行tsc --pretty），您可能会在某些行上看到红色波浪线。你应该像在Microsoft Word这样的编辑器中想到红色波浪一样考虑这些问题。TypeScript仍会翻译您的代码，就像Word仍然允许您打印文档一样。
如果这听起来太麻烦，你可以收紧这种行为。例如，如果您不希望TypeScript在遇到错误时编译为JavaScript，则可以使用该noEmitOnError选项。从这个意义上说，TypeScript有一个严格的表盘，你可以把它旋转到你想要的高度。
如果您打算使用可用的更严格的设置，最好现在打开它们（请参阅下面的“ 获取更严格的检查”）。例如，如果您从未希望TypeScript在any没有明确说明的情况下以静默方式推断类型，则可以noImplicitAny在开始修改文件之前使用。虽然它可能感觉有点压倒性，但长期收益变得更加明显。

从模块导入

你可能会开始得到一堆错误，比如Cannot find name 'require'.，和Cannot find name 'define'.。在这些情况下，您可能正在使用模块。虽然你可以通过写出来说服TypeScript这些存在

// For Node/CommonJS
declare function require(path: string): any;

要么

// For RequireJS/AMD
declare function define(...args: any[]): any;

最好摆脱这些调用并使用TypeScript语法进行导入。
首先，您需要通过设置TypeScript的module标志来启用某些模块系统。有效的选项为commonjs，amd，system，和umd。
如果您有以下Node / CommonJS代码：

var foo = require("foo");
foo.doStuff();

或以下RequireJS / AMD代码：

define(["foo"], function(foo) {
    foo.doStuff();
})

然后你会写下面的TypeScript代码：

import foo = require("foo");
foo.doStuff();

获取声明文件

如果您开始转换为TypeScript导入，您可能会遇到类似的错误Cannot find module 'foo'.。这里的问题是您可能没有声明文件来描述您的库。幸运的是，这很容易。如果TypeScript抱怨类似的包lodash，你可以写

npm install -S @types/lodash

如果您使用的模块选项不是commonjs，则需要将moduleResolution选项设置为node。
之后，您将能够毫无问题地导入lodash，并获得准确的完成。