乐趣区

关于typescript:开源项目从js到ts我所遇到的一些问题

jiezi

早在两年前，就拉了个 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.)
解决形式: 从新关上文件即可解决。

退出移动版