TypeScript+React组件库开发采坑实记.md

概述

本文为配置TypeScript+Webpack+React，开发UI组件库时遇到的坑以及相对应的解决方案记录，适合相关同学进行查阅解决问题。

本文主要内容为：

• tsconfig.js配置中遇到的问题
• 选择TypeScript Loader遇到的问题
• Webpack遇到的问题

此三类配置和选择会同时导致某一类问题，因此这三类不作为分类标准，仅作为读者思考的方向，我们下面会根据具体的问题和错误以及对应的解决方案来进行说明。

本文只需略读，在遇到相对应问题时，能够知道此处有提供相对应解决方案可以供尝试即可。

开发中遇到的问题

在项目中使用Webpack对应的alias

在使用TypeScript时，如果需要使用alias功能，有以下两种方法。相关解决方案参考Stack Overflow上面的回答，不过此回答仍然有部分内容没有考虑到，我们将在下面介绍时进行说明。

使用ts-loader

使用ts-loader作为loader来编译TypeScript时，你需要在TypeScript中配置baseUrl和paths，具体配置可以参考下面示例：

{
    "baseUrl": ".",
    "paths": {
        "Src/*": [
            "src/*"
        ],
        "Interfaces/*": [
            "src/interfaces/*"
        ],
        "Components/*": [
            "src/components/*"
        ],
        "Utils/*": [
            "src/utils/*"
        ]
    }
}

注：在paths中，绝对路径不允许以@开头，如：将@utils的绝对路径解析到src/utils中。

在tsconfig.json配置完成后，使用TsConfigPathsPlugin插件来读取相关配置文件到webpack.config.js中，官方示例配置如下：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
  }
  ...
}

通过这种方法，使用ts-loader就能够使用alias功能了。

使用awesome-typescript-loader

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

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

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

Webpack支持ts/tsx后缀

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

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

注：需要增加的字段都需要带上'.'，否则Webpack仍然不识别。

无法解析tsx文件

出现错误jsx You may need an appropriate loader to handle this file type.。

需要解决此问题，需要增加tsconfig.json中的jsx相对应的值，具体如下：

{
    "jsx": "react"
}

无法找到@types/csstypes

在编译时，出现无法找到@types/csstypes错误，具体错误内容为Cannot find module 'csstype'.。

需要解决此问题，需要增加tsconfig.json中的jsx相对应的值，具体如下：

{
    "moduleResolution": "node"
}

元素隐含地具有“任何”类型，因为类型“窗口”没有索引签名？

将部分JavaScript文件改成TypeScript文件时，会出现此错误，我遇到的问题是因为：定义的全局对象没有确定格式。

需要解决此问题，需要增加指定的Interface，格式如下：

Interface ObjInterface {
    [key: string]:string
}

总结

本文是我在工作中配置TypeScript+Webpack+React开发相关脚手架时遇见的问题，大家只需要阅读相关目录，对相对应的问题有所了解。在遇到相对应的问题时，再搜索进行解决即可。