TypeScript和JavaScript混合开发

510次阅读
没有评论

既然你选择了TypeScript,那么尽量不要使用any,特殊情况下可以用索引签名或者泛型解决


索引签名:

可以用字符串访问 JavaScript 中的对象(TypeScript 中也一样),用来保存对其他对象的引用

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

例如:

// ok
interface Foo {
  [key: string]: number;
  x: number;
  y: number;
}

// Error
interface 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,互相引用