How to lint for Typescript compilation issues?

Question

Take the following Typescript arrow function:

/**
 * Returns a probably unique component name.
 * 
 * @param baseName a suggested name to make unique.
 * @returns a probably unique name.
 */
export const getUniqueComponentName = (
  baseName
): string => {
  return baseName + Math.round(Math.random() * 10000000)
}

When Typescript is configured in tsconfig.json as such:

"noImplicitAny": true,

This correctly results in a compilation error:

[ts] Parameter 'baseName' implicitly has an 'any' type.

Visual Studio Code is also smart enough to inform you about this issue during development.

My goal is to create a precommit git hook that prevents such errors from ending up in version control. I tried to do this with tslint, husky and lint-staged using this npm script:

"lint": "tslint --project tsconfig.json --config tslint.json"

However, this does not result in the compilation error showing up by tslint. It is silently ignored.

I then tried to add a rule in tslint.json:

"typedef": [
      true,
      "arrow-parameter"
    ]

While this did make tslint complain, it also started to complain in anonymous arrow functions where the tsc compiler does not complain. In these arrow functions it should not be necessary to add types because the types were already set previously in the parent scope (they are inferred).

So basically, I would like for tslint to behave the same as tsc in this case. Anytime there is an error that would cause compilation to fail (such as the above arrow function), I would like to prevent the commit, but without actually compiling to Javascript. Is this possible?

Answer 1

I think your best bet is to run tsc --noEmit -p . and filter the output for errors in the modified files. For example, I saved the following script to tsc-some-files:

#!/bin/bash
declare -A include_files
for f in "$@"; do
  include_files["${f#$PWD/}"]=1
done
node_modules/.bin/tsc --noEmit -p . | (
  status=0
  show_continuation=false
  while IFS='' read -r line; do
    case "$line" in
    (' '*)
      if $show_continuation; then
        echo "$line" >&2
      fi
      ;;
    (*)
      file="${line%%(*}"
      if [ -n "${include_files["$file"]}" ]; then
        show_continuation=true
        echo "$line" >&2
        status=1
      else
        show_continuation=false
      fi
      ;;
    esac
  done
  exit $status
)

and set ./tsc-some-files as my lint-staged command, and it seemed to work. (Writing this in a programming language other than bash, if desired, is left as an exercise for the reader.)

Keep in mind though that editing one file can introduce an error in another file (e.g., if you changed the type of something that the other file is using), so I'd urge you to get your project clean of TypeScript errors ASAP by whatever hacks necessary (as long as you mark them so you can search for them later) and then set your hook to require no errors in the whole project. In fact, with respect to noImplicitAny in particular, when I migrated a JavaScript project to TypeScript several years ago, I wrote a script that inserted an explicit any everywhere there was an implicit any error, then I fixed the explicit anys at my leisure. I can share the script if you're interested.

Answer 2

I don't have enough reputation to add this as a comment, but anyone that is getting an error similar to

./scripts/ts-staged-files.sh: line 4: 
   src/ui/Components/Select/Select.tsx: division by 0 
  (error token is "/Components/Select/Select.tsx")

I made this small modification to Matt McCutchen's answer to fix it.

#!/bin/bash

include_files=()

for f in "$@"; do
  include_files+=("${f#$PWD/}")
done