<p dir="auto">I am converting a Protractor page object library from JavaScript to Typescript. I have a static utility method that refreshes until an element is present (or the timeout limit is reached).<br>
For some reason, I am unable to use a boolean valued promise as a thenable construct and I can't figure out why. The error message is  <strong>Error:(102, 50) TS2345:Argument of type '(isEnabled: boolean) =&gt; Promise | undefined' is not assignable to parameter of type '((value: boolean) =&gt; CloudletPolicyBean | IThenable) | undefined'.<br>
Type '(isEnabled: boolean) =&gt; Promise | undefined' is not assignable to type '(value: boolean) =&gt; CloudletPolicyBean | IThenable'.<br>
Type 'Promise | undefined' is not assignable to type 'CloudletPolicyBean | IThenable'.<br>
Type 'undefined' is not assignable to type 'CloudletPolicyBean | IThenable'.</strong></p>
<p dir="auto">The source code is below with comment showing where the compile error occurs.<br>
This was asked in SO and people there have commented that this is indeed a error with type definition for webdriver. Can someone here please take a look.<br>
<strong>selenium-webdriver types used: 3.0.4<br>
node:6.9.5<br>
protractor:5.1.2</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {browser, element, ElementFinder, ExpectedConditions} from 'protractor';
import * as wd from 'selenium-webdriver';
import {By} from &quot;selenium-webdriver&quot;;

export class ExtendedExpectedConditions {

    public static refreshUntilElementIsPresent(element: ElementFinder,  numberOfSeconds: number = 30000,
        refreshInterval: number = 5000): void {
        this.refreshElement(element, numberOfSeconds, refreshInterval);
    }

    protected static refreshElement(element: ElementFinder, numberOfSeconds: number = 30000, refreshInterval:
        number = 5000) {


        //This line throws the compile error
        element.isPresent().then(value =&gt; {
            if (!value) {
                if (numberOfSeconds &lt;= 0) {
                    return new wd.promise.Promise(function (resolve, reject) {
                        reject('Element cannot be found after expected retry numbers');
                    })
                }
                browser.sleep(refreshInterval).then(() =&gt; {
                    browser.refresh().then(() =&gt; this.refreshUntilElementIsPresent(element, numberOfSeconds -
                    (refreshInterval / 1000)));
                });
            }
       });
    }
}"><pre class="notranslate"><code class="notranslate">import {browser, element, ElementFinder, ExpectedConditions} from 'protractor';
import * as wd from 'selenium-webdriver';
import {By} from "selenium-webdriver";

export class ExtendedExpectedConditions {

    public static refreshUntilElementIsPresent(element: ElementFinder,  numberOfSeconds: number = 30000,
        refreshInterval: number = 5000): void {
        this.refreshElement(element, numberOfSeconds, refreshInterval);
    }

    protected static refreshElement(element: ElementFinder, numberOfSeconds: number = 30000, refreshInterval:
        number = 5000) {


        //This line throws the compile error
        element.isPresent().then(value =&gt; {
            if (!value) {
                if (numberOfSeconds &lt;= 0) {
                    return new wd.promise.Promise(function (resolve, reject) {
                        reject('Element cannot be found after expected retry numbers');
                    })
                }
                browser.sleep(refreshInterval).then(() =&gt; {
                    browser.refresh().then(() =&gt; this.refreshUntilElementIsPresent(element, numberOfSeconds -
                    (refreshInterval / 1000)));
                });
            }
       });
    }
}
</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest <code class="notranslate">mocha/index.d.ts</code> file in this repo and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I want to talk about <code class="notranslate">mocha/index.d.ts</code>.
<ul dir="auto">
<li>The authors of that type definition are cc/ <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vvakame/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vvakame">@vvakame</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ligaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ligaz">@ligaz</a>,</li>
</ul>
</li>
</ul>
<p dir="auto">I've started a new angular2 project and included the following dev dependency:<br>
<code class="notranslate">"@types/mocha": "2.2.33",</code></p>
<p dir="auto">It installs correctly however when I run:<br>
<code class="notranslate">webpack --config webpack.config.dev.js --progress --profile --watch</code></p>
<p dir="auto">I get:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[at-loader] node_modules/@types/jasmine/index.d.ts:15:18 
    Duplicate identifier 'xit'. 

[at-loader] node_modules/@types/mocha/index.d.ts:33:13 
    Duplicate identifier 'describe'. 

[at-loader] node_modules/@types/mocha/index.d.ts:34:13 
    Duplicate identifier 'xdescribe'. 

[at-loader] node_modules/@types/mocha/index.d.ts:39:13 
    Duplicate identifier 'it'. 

[at-loader] node_modules/@types/mocha/index.d.ts:40:13 
    Duplicate identifier 'xit'. 
"><pre class="notranslate"><code class="notranslate">[at-loader] node_modules/@types/jasmine/index.d.ts:15:18 
    Duplicate identifier 'xit'. 

[at-loader] node_modules/@types/mocha/index.d.ts:33:13 
    Duplicate identifier 'describe'. 

[at-loader] node_modules/@types/mocha/index.d.ts:34:13 
    Duplicate identifier 'xdescribe'. 

[at-loader] node_modules/@types/mocha/index.d.ts:39:13 
    Duplicate identifier 'it'. 

[at-loader] node_modules/@types/mocha/index.d.ts:40:13 
    Duplicate identifier 'xit'. 

</code></pre></div>
<p dir="auto">My webpack config file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: './public/js/app',
        publicPath: &quot;/js/app/&quot;,
        filename: 'bundle.js',
        chunkFilename: '[id].chunk.js'
    },
    entry: {
        'app': './assets/app/main.polymer.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.css$/,
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            './src' // location of your src
        )
    ]
};"><pre class="notranslate"><code class="notranslate">var webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: './public/js/app',
        publicPath: "/js/app/",
        filename: 'bundle.js',
        chunkFilename: '[id].chunk.js'
    },
    entry: {
        'app': './assets/app/main.polymer.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.css$/,
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            './src' // location of your src
        )
    ]
};
</code></pre></div>
<p dir="auto">Same thing happens with @types/jasmine. Maybe there is a relation?</p>