Setup TypeScript for the project

[christian-bromann]

Is your feature request related to a problem? Please describe.
As the code base is growing and the ecosystem leaning more and more towards TypeScript as type safe JavaScript flavor it makes sense to introduce it into the project as well. It help us grow the code base while at the same time reduce the amount of errors due to type issues.

Describe the solution you'd like
Let's get rid of Babel as compiler and replace it with TypeScript to start type safe programming. As we can't just rewrite the whole code base we should introduce a setup that allows us to continue to use our ESNext code while start writing new code in TypeScript.

Describe alternatives you've considered
Alternatively I considered just getting rid of Babel and convert everything to ES Modules (see #5401). However this can still be achieved with TypeScript.

Additional context
This discussion was triggered by #5399 and was discussed with the @webdriverio/technical-steering-committee. Everyone agreed that switching to TypeScript is a good idea. The reason why (particular myself) was hesitating towards this was that adding TypeScript to the code base increases the barrier for contributing to the project. However the code base increased in size which already creates a high barrier for people that aren't experienced enough.

[baruchvlz]

introduce a setup that allows us to continue to use our ESNext code while start writing new code in TypeScript.

The TypeScript compiler has a flag, --allowJS, which compiles JavaScript files along side TypeScript files.

As we can't just rewrite the whole code base

We could also start re-writing the smaller modules and slowly progress to bigger ones.

Alternatively I considered just getting rid of Babel and convert everything to ES Modules (see #5401). However this can still be achieved with TypeScript.

tsc --module=ESNext should do the trick.

[erwinheitzman]

I'm going to make a start on this if there are no objections

[erwinheitzman]

This evening I made a start with TypeScript where I have the @wdio/* paths and all other paths working without the use of a plugin (for now?). However I ran into a small challenge which I'd like to discuss with you all which is about the usage of the :: aka bind operator that's available through Babel.

Currently there's two ecmascript proposals for this functionality:

• Support proposed ES Next "::" bind operator microsoft/TypeScript#3508 (the bind operator)
• Support proposed ES Next "|>" pipeline operator microsoft/TypeScript#17718 (the pipe operator)

However both proposals are still in stage 1 and therefor will not be in the language anywhere soon.

Two solutions I can think of right now:

• run Babel with only the bind operator plugin enabled on the source, and save the output over the top (reference: Support proposed ES Next "::" bind operator microsoft/TypeScript#3508 (comment))
• run Babel with only the pipe operator plugin enabled on the source, and save the output over the top (reference: Support proposed ES Next "|>" pipeline operator microsoft/TypeScript#17718 (comment))
• use the normal bind method that Javascript provides

I'd love to hear your thoughts on this.

[christian-bromann]

@erwinheitzman let‘s use the normal bind method given that the proposals haven’t made much progress.

[mgrybyk]

I believe we can start refactoring package by package. It would be way easier to review

[erwinheitzman]

yeah I am starting with the webdriverio package and migrate only a few small files but once I have it setup we should be able to reuse that across all packages

[christian-bromann]

Let's keep the scope of this issue to setup TypeScript for all modules with minimal actual code rewrite after that we can start refactoring file by file.

[mgrybyk]

@erwinheitzman do you think we can change the target from es5 to es2017?

I'd also insist on using a linter for TS files straight away, ex:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  env: {
    node: true,
    mocha: true,
  },
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/member-delimiter-style': 'off',
  },
}

[christian-bromann]

With #5804 we will get rid of Babel and therefor can close this.