开源项目从js到ts，我所遇到的一些问题

早在两年前，就拉了个ts的分支，但稍作尝试后，就找了一堆借口放弃了。最近处于离职状态，时间充裕的我终于下定决心向ts走近一步。

准备工作

期间先是在网上找了一些ts相关的资料，把原先只限于demo的ts技能稍作提升。过程中强迫自已先学习后动手，虽然学习过程中一行代码都不写的滋味并不好受，但总体下来却省下了很多时间。

无关框架

开源项目GridManager是一个原生js实现的跨框架(jquery、react、vue2.x、angular1.x)表格组件，所以在切换ts的过程中并不会牵扯到框架特性。

问题汇总及解决

js文件解析错误

对于一个已经存在的项目，很难做到一次性完整切换，所以需要支持解析原有的js文件。

{
    "compilerOptions": {
         // 允许编译javascript文件
        "allowJs": true
    }
}
复制代码

无法使用object[key]方式

刚调整完配置后，满屏的报错中这一类是最多的。

// tsconfig.json
{
    "compilerOptions": {
        // 开启配置项suppressImplicitAnyIndexErrors
        "suppressImplicitAnyIndexErrors": true
    }
}
复制代码

无法使用装饰器

相关介绍上提到装饰器在ts中是实验性质的存在，虽然有些遗憾但好在有配置项可以启用。

// tsconfig.js
{
    "compilerOptions": {
        "experimentalDecorators": true, // 启用实验性的ES装饰器
    }
}
复制代码

webpack别名失效

原本可用的别名失效了，导致出现大量的import模块路径错误。

// webpack config
// 原webpack配置的别名如下，在ts文件中却失效了
resolve: {
       extensions: ['.js', '.ts'], // 当requrie的模块找不到时,添加这些后缀
       alias: {
           '@common': resolve('src/common'),
           '@jTool': resolve('src/jTool'),
           '@module': resolve('src/module')
       }
},
复制代码

// tsconfig.js
{
    "compilerOptions": {
        // 在paths中配置解析路径
        "paths": {
            "@*": ["./src/*"]
        }
    }
}
复制代码

改造过程中构建体积变大

这是由于ts-loader进行了es5转换，原先的babel优化失效了。

指定ECMAScript的目标版本

// tsconfig.js
{
    "compilerOptions": {
        // 将tsconfig.json中的target调整为es6，如果项目中使用到了ES2017的特性，则需要改为ES2017。
        // 配置后，ts文件解析时将不再负责将es6转换为es5
        "target": "ES2017"
module
    }
}
复制代码

指定webpack loader: 在ts-loader执行后继续执行babel-loader。

// webpack loader
{
    test: /.tsx?$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader'
        },
        {
            loader: 'ts-loader'
        }
    ]
}
复制代码

karma启动报错

项目中的单元测试使用到的karma-webpack，也需要增加ts-loader。

// karma-webpack loader
{
    test: /.tsx?$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader'
        },
        {
            loader: 'ts-loader'
        }
    ]
}
复制代码

异常export default报错

只有一个export default却提示存在多个export default。错误代码(TS2528: A module cannot have multiple default exports.)
解决方式: 重新打开文件即可解决。