usePipeTransformInterfaceRule failure on valid pipe

[deepu105]

The simple below pipe fails the validation, I'm unable to figure out the root cause

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform  {

    transform(input: string): string {
        if (input !== null) {
            input = input.toLowerCase();
        }
        return input.substring(0, 1).toUpperCase() + input.substring(1);
    }
}

WARNING in ./src/main/webapp/app/shared/language/language.pipe.ts
[3, 1]: The FindLanguageFromKeyPipe class has the Pipe decorator, so it should implement the PipeTransform interface
[40, 1]: The CapitalizePipe class has the Pipe decorator, so it should implement the PipeTransform interface

 @ ./src/main/webapp/app/shared/index.ts 17:9-44
 @ ./src/main/webapp/app/app.module.ts
 @ ./src/main/webapp/app/app.main.ts

[deepu105]

looks like there is a closed issue #145 for the same.
I'm on "codelyzer": "2.0.0-beta.4" , "typescript": "2.1.4" and "webpack": "2.2.0"

here is my entire package.json

{
  "name": "temp",
  "version": "0.0.0",
  "description": "Description for temp",
  "private": true,
  "cacheDirectories": [
    "node_modules"
  ],
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.2",
    "@angular/upgrade": "2.4.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.15",
    "bootstrap": "4.0.0-alpha.5",
    "font-awesome": "4.7.0",
    "angular2-cookie": "1.2.6",
    "core-js": "2.4.1",
    "jquery": "3.1.1",
    "ng-jhipster": "0.1.1",
    "ng2-webstorage": "1.4.2",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.2",
    "swagger-ui": "2.2.8",
    "tether": "1.4.0",
    "ui-router-ng2": "1.0.0-beta.3",
    "ui-router-visualizer": "2.0.11",
    "zone.js": "0.7.4"
  },
  "devDependencies": {
    "@types/angular": "1.5.22",
    "@types/angular-animate": "1.5.6",
    "@types/angular-mocks": "1.5.8",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.45",
    "add-asset-html-webpack-plugin": "1.0.2",
    "angular2-infinite-scroll": "0.2.8",
    "angular-cli": "1.0.0-beta.24",
    "angular2-template-loader": "0.6.0",
    "awesome-typescript-loader": "3.0.0-beta.17",
    "browser-sync": "2.18.5",
    "browser-sync-webpack-plugin": "1.1.3",
    "codelyzer": "2.0.0-beta.4",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.26.1",
    "del": "2.2.2",
    "event-stream": "3.3.4",
    "exports-loader": "0.6.3",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "file-loader": "0.9.0",
    "generator-jhipster": "3.12.2",
    "html-webpack-plugin": "2.24.1",
    "image-webpack-loader": "3.1.0",
    "jasmine-core": "2.5.2",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-phantomjs-launcher": "1.0.2",
    "karma-remap-istanbul": "0.3.2",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "1.8.0",
    "lazypipe": "1.0.1",
    "lodash": "4.17.3",
    "map-stream": "0.0.6",
    "phantomjs-prebuilt": "2.1.14",
    "proxy-middleware": "0.15.0",
    "raw-loader": "0.5.1",
    "run-sequence": "1.2.2",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.0.4",
    "style-loader": "0.13.1",
    "to-string-loader": "1.1.5",
    "tslint": "4.2.0",
    "tslint-loader": "3.3.0",
    "typescript": "2.1.4",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-merge": "2.0.0",
    "webpack-visualizer-plugin": "0.1.9",
    "write-file-webpack-plugin": "3.4.2",
    "xml2js": "0.4.17",
    "yargs": "6.5.0"
  },
  "engines": {
    "node": "^4.3"
  },
  "scripts": {
    "start": "npm run webpack:dev",
    "test": "karma start src/test/javascript/karma.conf.js",
    "test:watch": "karma start --watch",
    "postinstall": "npm run webpack:build",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lint": "tslint src/main/webapp/app/**/*.ts --force",
    "lint:fix": "tslint src/main/webapp/app/**/*.ts --fix --force",
    "webpack:build": "webpack --config webpack/webpack.vendor.js && webpack --config webpack/webpack.dev.js",
    "webpack:dev": "webpack-dev-server --config webpack/webpack.dev.js  --progress --inline --hot --profile --port=9060",
    "webpack:prod": "webpack -p --config webpack/webpack.vendor.js && webpack -p --config webpack/webpack.prod.js"
  }
}

[mgechev]

I tried to reproduce the issue on http://codelyzer.com/ but I wasn't able to. Would you try the same and let me know if you get an error?

[deepu105]

I couldnt reproduce on the site but on the project it gives this warning. we are using this in JHipster. So i think it has something to do with typescript or some other dependency version

[mgechev]

Could be related to TypeScript version mismatch. Can you verify which one are you using in your project?

[scttcper]

I'm getting the same bug on atom-tslint and also not able to reproduce on the codelyzer website.

project

"tslint": "^4.4.2",
"codelyzer": "~2.0.0-beta.4",
"typescript": "~2.1.5"

atom linter-tslint v0.13.1

[scttcper]

this silences it. I think there's an issue with tslint Pipe and the Pipe class name? Atom seems to think Pipe is a keyword like class or number. Maybe its looking for .pipe()? I have no idea what i'm talking about.

import { Pipe as NgPipe, PipeTransform } from '@angular/core';
@NgPipe({ name: 'matchMode' })
export class MatchModePipe implements PipeTransform {
  transform(value: any) {
    if (!value) {
      return '';
    }
    return getMode(value);
  }
}

[mgechev]

@scttcper unfortunately this doesn't work at this point. Probably it'll be fixed in future releases when we reuse the language service in our front-end.

[mgechev]

@scttcper I meant that codelyzer doesn't know that NgPipe refers to Pipe. The lint rule should not fail.