TypeScript和JavaScript混合开发，这或许是配上单元测试的最佳实践

作者：前端巅峰 公号 / Peter 谭金杰 原文地址：https://mp.weixin.qq.com/s/L_3z5rlXFTDdwvHpN9tI6g
既然你选择了TypeScript，那么尽量不要使用any，特殊情况下可以用索引签名或者泛型解决

索引签名：

可以用字符串访问 JavaScript 中的对象（TypeScript 中也一样），用来保存对其他对象的引用

当你声明一个索引签名时，所有明确的成员都必须符合索引签名

例如:

// okinterface Foo {  [key: string]: number;  x: number;  y: number;}
// Errorinterface Bar {  [key: string]: number;  x: number;  y: string; // Error: y 属性必须为 number 类型}

---

当你有项目需要从javaScript迁移到TypeScript中时，有一部分同学做法是，把所有到文件从.js全部改成.ts，然后加上所有类型为any，这样完成快速迁移，但是其实不需要这样。

我们可以让TS和JS进行混合开发

---

还是不废话了，直接给一套配置吧，其实就是两点：

一、在项目根路径下使用tsc –init,生成tsconfig.json文件：

配置allowJs选择为：true

{  "compilerOptions": {    "jsx": "react",    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,    "allowJs": true, /* Allow javascript files to be compiled. */    "strict": true /* Enable all strict type-checking options. */,    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */  } }

---

然后在webpack.base.config.js文件中配置loader处理.ts .tsx代码文件

  extensions: ['.ts', '.tsx', '.js', '.jsx'],
  {
    test: /\.ts(x?)$/,
    use: [
            {
              loader: 'babel-loader',
              options: { //jsx语法                  presets: 
                  [
                    ['@babel/preset-env', { modules: false }]
                  ],                  
                    cacheDirectory: true,
                    
              },              
            },              
            {                
              loader: 'awesome-typescript-loader',              
            },            
          ],          
    },

这样你就可以使用JS和TS混合开发了，在这过程中，你并不需要使用any去完成快速迁移，因为当你全部使用any后，会导致不可预测的情况出现。而且后期还要重构那一部分。

当然，单元测试的代码配置也要改变，我平常使用的是JEST

---

setupEnzyme.ts文件

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({  adapter: new Adapter(),});

_test__文件夹下面的文件，也要改成.tsx .ts为后缀结尾

jest.config.js文件也要修改

const path = require('path');
module.exports = {
    roots: ['<rootDir>/test'],
    testRegex: 'test/(.+)\\.test\\.(jsx?|tsx?)$',
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    moduleNameMapper: {
        '\\.(css|less)$': 'identity-obj-proxy',
    },
    setupFilesAfterEnv: [path.resolve(__dirname, './setupEnzyme.ts')],
    testEnvironment: 'enzyme',
};

这样你就可以在JS中愉快的编写TS，互相引用，甚至使用愉快的使用单元测试

觉得本文对你有帮助？请分享给更多人