"Variable used before declaration" with renamed import with the same name as another import

[tomduncalf]

Bug Report

• TSLint version: 3.13.0
• TypeScript version: 2.0.0
• Running TSLint via: CLI and Visual Studio Code

TypeScript code being linted

import { Test as ITest } from './TestInterface'

import Test from './Test'

with tslint.json configuration:

{
  "rules": {
    "no-use-before-declare": true
  }
}

Actual behavior

index.ts[1, 10]: variable 'Test' used before declaration

Expected behavior

No errors. This works correctly with Typescript 1.8.10.

Example repo at https://github.com/tomduncalf/tslint-bug

[tomduncalf]

Off topic – excellent issue template by the way :)

[IllusionMH]

The root case for this issue - change in behavior of this.languageService.getDocumentHighlights that start to return all propertyNames from imports even if they have alias.

I've tracker this to function populateSearchSymbolSet which has different results in TS 1.8.10 (symbol for Test) and 2.0.3 (symbols for Test and unknown)

getDocumentHighlights
getSemanticDocumentHighlights
getReferencedSymbolsForNode
getReferencesInNode
populateSearchSymbolSet

I didn't found any notices about such breaking changes in languageService

@jkillian, @adidahiya possible fix is to track positions of imported properties that has alias and don't show error if highlighted position matches position of tracked items. This won't introduce any problems for TS1.8.

However this method is used across several other rules and may cause other regressions.
Do you know where it is possible to find API documentation for all TS components?

Is it possible that this is regression in TS?

[joscha]

This error was gone in TS 2.1.x but reappared in TS 2.2.

A type declaration for CSS modules as follows:

declare module "*.css" {
  const styles: any;
  export default styles;
}

and an import in bla.tsx via:

import styles from './some.css';

results in:

bla.tsx[6, 21]: variable 'styles' used before declaration

[joscha]

A workaround for this is to add as many number of lines before the declare module "*.css" as there are potentially import statements in any of your tsx files.

[joscha]

seems to be fixed in tslint 5.1

[adidahiya]

@joscha thanks for the confirmation, that makes sense since we switched to tsc's implementation of no-use-before-declare.

[andy-hanson]

Just to clarify, tsc doesn't have it's own implementation of no-use-before-declare; instead the rule uses checker.getSymbolAtLocation(node).declarations and checks that some declaration occurs before the use.

[mariohmol]

Having similar issue, but with a code like that. Is this related?

import { Component, ViewChild } from '@angular/core';
import { BasePage } from '../core/basepage.component';

@Component({
  selector: 'app-page-seller',
  templateUrl: 'seller.component.html'
})
export class SellerPageComponent extends BasePage {
  @ViewChild('myTabs') tabRef: Tabs;
  tab1Root: any = SellerViewComponent;
  tab2Root: any = SellerAreaComponent;
  tab3Root: any = SellerOrdersComponent;

The error:
variable 'SellerOrdersComponent' used before declaration