Tslint: React component imports being reported as unused imports even though they are being refrenced by other components

[mdahamiwal]

Bug Report

• TSLint version: 3.13.0
• TypeScript version: 1.9
• Running TSLint via: CLI
  

  TypeScript code being linted

import * as React from "react";

React.Component {
    return( <div></div>);
}

with tslint.json configuration:

 "no-unused-variable": true

Actual behavior

React component imports are being flagged as unused even though they are being used in another components..

Expected behavior

linter should not flag such imports as and this applies to all tsx files that uses this pattern.

[adidahiya]

@mdahamiwal that code sample doesn't look like valid typescript. Also, which identifier is flagged as unused?

[mschnee]

I can provide an example (for lack of a better issue, I have no idea how I'd describe this bug anyways):

Given React and Radium,
package.json

{
   "dependencies": {
        "radium": "0.16.2",
        "react": "0.14.8",
    }
}

import * as React from 'react';
import * as Radium from 'radium';

interface MyTestComponentProps extends React.Props<MyTestComponent> {
}

export class MyTestComponent extends React.Component<MyTestComponentProps, void> {
    render(): JSX.Element {
        return (
            <div className='myDiv'>
                <Radium.Style
                    scopeSelector='.myDiv'
                    rules={{
                        margin: '1px auto',
                    }}
                />
                <p>
                    I am some friendly text.
                </p>
            </div>
        );
    }
}

The error is

import * as Radium from 'radium';
            ^^^^^^ Unused variable 'Radium'

Though it is used below in

<React.Style ... />

[pablonete]

I'm also seeing this issue consistently when using import * as Foo from "foo" and then only using Foo in TSX syntax. If used in plain TS code, it doesn't complain, otherwise Foo is reported as unused.

FWIW I also have a slightly related issue with chained imports:

import * as Foo from "foo"`;
import bar = Foo.bar;

Foo is reported as unused by TSLint even when it's used in another import. I agree this is a weird syntax, but still valid TypeScript.

My guess is that both issues are related.

[adidahiya]

@mschnee which version of TypeScript are you using? that looks a lot like https://github.com/palantir/tslint/issues/1010

[pablonete]

tsc --version
Version 1.8.10

tslint --version
3.14.0

If I update to [email protected], the issue gets fixed, but I don't want to use it yet. Have I got other choices?

[jkillian]

Well, another option is to use // tslint:disable-next-line:no-unused-variable above your import, but that's a pain.

TS 2.0 is really easy to upgrade to though! I don't think I've had to change a single line of code in any of my projects that I upgraded.

[mschnee]

@adidahiya
Typescript 1.8.10, tslint 3.9.0

If it's fixed in newer tslint, I'll pass that up the chain. Unfortuantely for the specific project I am working on, the versions of typescript and tslint are locked and outside of my control :/

_Update_
Tested out typescript 1.8.10, tslint 3.14.0, still claiming that import * as Radium from 'radium'; is unused, but used as <Radium.Style ... /> in tsx.

[adidahiya]

It was a bug in the TypeScript language services that was fixed in v1.9. Disabling the rule is your best option if you can't upgrade TS.

[pablonete]

@adidahiya Where is TS 1.9? I can only see 1.8.10 and 2.0 beta in https://github.com/Microsoft/TypeScript/releases

[adidahiya]

@pablonete 1.9.x only had -dev releases, so you'll see that on the next dist-tag on NPM. 2.0 beta also has the fix.