E25: Fix bad Typescript

The goal of this experience is to help you get comfortable removing errors found by ESLint:

First, create a project called “BadTypescript” by creating a folder named “BadTypescript” and opening it in VSCode.

Second, set up your project to use our class coding standards. If you’ve already done E24 (which means you configured VSCode, and installed Node and NPM), then for new projects such as this one, you just need to:

Download five files into your project directory:

Invoke npm install to install ESLint.

Third, create a file called “BadTypescript.ts”, and copy the following code into it:

/**
 * How many violations of the AirBnb Typescript Style guide can we pack into one file?
 * Created by Philip Johnson on 8/4/16.
 */

var foo = 3;
const car = "Toyota";
const obj = {
  car: car,
  'foo': 3,
  bar: 'this' + 'is' + this.car,
  baz: 'b\az'
};
const zumba = obj['car'];
const stuff = new Array();

function f(){};
function zob(param) {
  param = 2;
  let foob=4+param;
  if (param == 4) {
    return foob;
  }
}
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});
class MyClass {
  constructor() {}
  getName() {
    return this.name;
  }
  getName() {
    return this.name;
  }
}
const TheTitle = 'The Title';

// export names so that there aren't a bunch of spurious "defined but not used" errors (except the first one!)
export default {  obj, stuff, zumba, f, zob, MyClass, TheTitle };

You should find that VSCode reports around thirty-two errors in this small amount of code.

picture

You can also run npm run lint from the command line to see the errors.

picture

Now go through the code and fix all the errors. When you’re done, you should not see any ESLint errors in the VSCode editor.

picture

You can also run npm run lint from the command line to see there are no errors.

picture

If you have problems, you can watch the following screencast for hints:

Submission instructions

You do not have to submit anything for this experience. However, your ability to install ESLint and use it to remove warnings will be evaluated in subsequent experiences, so be sure to complete this experience successfully! If you run into problems, see the TA or the Instructor or a classmate to help you fix it.