[typescript] cannot redeclare block range variables

background

When using TypeScript + TSlint + Babel + Jest When setting up a development environment , In the development process, it is occasionally IDE Tips 「 Cannot redeclare a block range variable 」, This leads to compilation errors , The error reporting diagram is as follows ：

Relevant development environment configurations are as follows ：

1. typescript: ^3.5.3
2. tslint: ^5.19.0
3. babel: ^7.0.0
4. jest: ^24.9.0
5. ts-jest: ^24.0.2

Solution

The reason tslint This error will be prompted , Because in Commonjs In the norm , Didn't like ESModule Capable of forming closures 「 modular 」 Concept , All modules are thrown to the global by default when they are referenced , So when a module is declared again ,TypeScript You will think that you have declared the same variable twice, and then throw it wrong .

For this question , The simplest solution is to add a line of code at the bottom of the error file ：export {}. This line of code will 「 cheating 」tslint Make it think that the current file is a ESModule modular , Therefore, there is no possibility of repeated declaration of variables . When using this method , Remember to configure your tsconfig.json file ：

{
    
  "include": ["src", "demo"],
  "compilerOptions": {
    
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "esModuleInterop": true, // important!
    "target": "esnext",
    "strict": true,
    "outDir": "app",
    "declaration": true,
    "sourceMap": true
  }
}

among esMoudleInterop This configuration allows... To appear in the file export keyword .

Another question

When you think everything is all right , You will find that the second problem has surfaced again ： You cannot execute compiled JavaScript Code ！ Yes , because babel Although it can help you translate successfully TypeScript Code , But it doesn't help you get rid of , you hack Upper export keyword , therefore node An error will be reported because the keyword is not recognized .

At this point you have two choices ：

Delete export keyword , Endure annoying IDE Tips , To give way by force babel compile ;

Fortunately, , It really works , because tslint Just one. “lint”, It is only responsible for reminding you where there is a problem , You can force it to be ignored . however , When you use Jest coordination TypeScript This will not work when testing , because Jest Will be able to tslint The mistakes found are told to you as unforgivable mistakes , It means , You can't happily test your code , Of course, you can also choose the second solution ：

Write a babel plug-in unit , Give Way babel Remove during translation export keyword ;

So your node The translated code can be recognized , Yours Jest No longer complain , The best of both worlds ！ However , Do you really want to write a plug-in for this ？

If your first reaction is as big as mine 「NO!!!」, You should keep looking down , In fact, we have a third plan ：）

The ultimate solution

actually , There is already one babel The plug-in can meet our needs ：@babel/plugin-transform-modules-commonjs , This is what we have always dreamed of . As the plug-in name implies , It can be ESModule The module is converted to conform to Commonjs Standard code , And after my test , When you meet export {} Such an expression , The translation scheme is ：「 Direct to ignore 」！ This is exactly what we want ！

That's it , In your babel.config.js Add this plug-in to ,TSlint No more complaints ,Jest Be able to test ,Node I won't yell at you “What the * export !!”, The whole world is clean .

Last , Let's share my complete set of related configurations , I hope you won't be bothered by this problem ：

tsconfig.json

{
    
  "include": ["src", "demo"],
  "compilerOptions": {
    
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "target": "esnext",
    "strict": true,
    "outDir": "app",
    "declaration": true,
    "sourceMap": true
  }
}

jest.config.js

module.exports = {
    
  roots: ['<rootDir>/src'],
  transform: {
    
    '^.+\\.tsx?$': 'ts-jest',
  },
  testPathIgnorePatterns: ['/node_moudles/', './src/utils/test.ts'],
}

babel.config.js

module.exports = {
    
  presets: ['@babel/typescript'],
  plugins: [
    '@babel/plugin-transform-modules-commonjs',
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
  ],
}