关于typescript:开源项目从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.)
解决形式: 从新关上文件即可解决。