作者:前端巅峰 公号 / 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,互相引用,甚至使用愉快的使用单元测试

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