lint errors making the code change but not sure how to proceed

Question

updated.

I updated the code like this but still I am getting the below error

error Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible

updated code

    public sportsService: string;

  constructor( sportsService: String) {
    this.sportsService = sportsService;
  }

• I am new to tslint and typescript.

• I am trying to fix this error. Property 'waterService' cannot be declared in the constructor

• happening at this line constructor(public sportsService: SPORTSService) {}

• can you tell me how to fix it.

• i did some research but not able to find solutions.
• providing code below.
• even looked at this link and tried but not able to proceed

https://github.com/Microsoft/tslint-microsoft-contrib

Property 'waterService' cannot be declared in the constructor

/** Trees for contract and title. */
import {
  Component,
  Inject,
  OnInit,
  EventEmitter,
  ViewChild,
  Input,
  Output
}
from '@angular/core';
import {
  SPORTSService
}
from '../../services/sports.service';
import {
  KendoGridComponent
}
from '../grid/grid.component';
import {
  KendoDialog
}
from '../shared/kendoDialog/kendodialog';
import {
  ProgressCircle
}
from '../shared/progress/progress-circle';

declare let $: any;



@Component({
  selector: 'player',
  template: `<div id="windowcontainer"></div>`
})

export class player implements OnInit {

  private henInfoPopUpWindow;
  private airDate;
  private airTime;
  private showTitle;


  @Input() kendoCommandObj: any;




  constructor(public sportsService: SPORTSService) {}

  private kendocommand = {
    edit: {
      createAt: "bottom"
    },
    group: false,
    reorder: true,
    disableFreeze: true,
    resize: true,
    sort: true,
    autoBind: true,
    filter: false,
    pager: {
      messages: {
        //display: "Showing {0} to {1} of {2} entries"
      }
    },
    model: {},
    columns: [],
    pagesize: 50,
    getComponentUrl: "swimming",
    searchFields: [],
    mandatoryFields: [],
    saveStatus: false
  };


  @Output() applyAPTInfo: EventEmitter < any > = new EventEmitter < any > ();
  @Output('mouseCount') getTreeEvent = new EventEmitter<number>();

  ngOnInit() {
    this.mouseType = 'hen';
    let that = this;
    let attributes=this.sportsService.getSeesionStorageValue();

Answer 1

TSLint has a rule that disallows the use of constructor properties (ie when you prefix a constructor parameter with an accessor keyword like public or private ).

"no-parameter-properties": true

In my opinion, this is a nonsensical rule, because I would much rather see:

class Example {
    constructor(private name: string) {}
}

And I don't want to see:

class Example {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }
}

In other words, stop manually assigning TypeScript constructor parameters !

Fix

Simply switch off the rule:

"no-parameter-properties": false

Fix 2

For your second error, you have used the String interface in your type annotation. The fix for this is to follow the TSLint rule, as it is sound, and use string , number , boolean , etc where using primitive types in type annotations.

let x: String; // <-- interface String

let y: string; // <-- primitive type string

Additionally, it is pretty much a rule to follow in plain JavaScript too, where it is preferable to use literals, rather than objects:

let x = 'A literal string value here'; // <-- literal

let y = new String('String object'); // <-- object

Answer 2

this is a good rule of tslint, it means always use primitive type names and not primitive type constructors

you should replace:

• String with string
• Boolean with boolean
• Number with number

If you interested what the difference is, check this links:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number