TypeScript+Webpack+React采坑实记

本文为配置TypeScript+Webpack+React，开发UI组件库时遇到的坑以及相对应的解决方案记录。

1.使用awesome-typescript-loader

推荐使用此loader来编译TypeScript，速度相较于ts-loader来说，肉眼可见的快。

在使用awesome-typescript-loader时，在Stack Overflow(https://stackoverflow.com/questions/40443806/webpack-resolve-alias-does-not-work-with-typescript)的回答中说这个插件会将tsconfig.json中的配置文件自动添加到Webpack中。经过实践发现，当绝对路径最终引用的文件是一个Interface时，只需要在tsconfig.js中进行指定即可找到相对应文件。

当绝对路径最终引用的文件是一个Function时，如果不指定webpack alias字段，则会出现相关错误，如Module not found: Error: Can't resolve 'Utils/handle-url'。需要解决此问题，只需要在webpack alias中添加相同配置的alias即可解决。

2.Webpack支持ts/tsx后缀

需要让Webpack支持ts/tsx后缀，需要在extension字段中添加相对应的值，具体如下：

{

    "extensions": [".ts",".tsx"]

}

3.TypeScript还不支持可选的链接运算符

由于项目中使用了 https://github.com/tc39/proposal-optional-chaining 这种方式做可选链接，TypeScript还不支持可选的链接运算符，所以我采用了 ts-optchain (https://github.com/rimeto/ts-optchain)