Steps to migrate from javascript to typescript

All the java and C# lover coming to a javascript world I can understand your discomfort coming from that compiled world. When I had to work for javascript project in our test automation it was very difficult to declare the type of variables.

That led us to move to typescript.

Steps to move :

1. Install a typescript: npm install — save-dev typescript
2. Add a tsconfig.json file.

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

2. Rename all of your .js files to .ts

3. Fix a compilation error: We will receive a compilation errors due to the static type checking by the typescript. Handle the popped up error after renaming from .js to .ts. The errors you will encounter will be on imports, declaration, and type of variable or const. Use the typescript way of importing files as

import {BaseTests} from "./BaseTests";

4. Export class in typescript: There would be a failure in your test class files due to the way it is exported in javascript.

export class BaseTests {

    before(): any {
        browser.url('http://automationpractice.com/index.php');
    }
}

5. Add a ts-node compiler in your wdio-conf.ts

ui: 'bdd',
    timeout: 60000,
    compilers:['ts:ts-node/register']
},

6. Refactor the code: Typescript helps in arranging your code in an object-oriented manner. One can apply the oops concept while re-arranging their code base. We did not add all the type information in the existing code at one gone, we did it when refactoring that piece of code. Webstorm IDE has helped in refactoring and auto-updating the moved test classes.

7. More strict checks: TypeScript comes with certain checks to add safety net compile-time analysis for our files. We can enable these safety checks based on our need. To get started with add: strict null & undefined checks.

{ “compilerOptions”: { “noImplicitAny”: true, “strictNullChecks”: true } }

8. The following github repo has sample typescript project with wdio and allure reporting :

https://github.com/varunatester/wdio-typescript