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