Recipe: Tightening TypeScript Settings

This page describes how to set up Akitainu for gradually applying tighter TypeScript settings so that you do not need to fix all existing code at once to comply the new setting.

This recipe is a CI-based method. This description uses GitHub Actions as an example.

Prepare two tsconfig.json files

Rename old (looser) TypeScript config to tsconfig.old.json. Then, lettsconfig.json be one with tighter settings.

The looser config is to be used for checking whole project, and the tighter one is for checking files changed in a pull request. Naming the tigher one tsconfig.json is for applying the tigher setting to your editor's TypeScript support so that you can notice new type errors during development.

Set up .akitainurc.pr.js

Let's define an Akitainu config for checking pull requests.

The following setting takes a git diff with akitainu:source-git-diff and type checks files that appear in the diff (actually, TypeScript does not support checking only specified files; due to the nature of type checking, whole project must be loaded. akitainu-checker-typescript runs TypeScript agains the whole projects and filters out type errors in files not specified ).

Also, it utilizes akitainu-reporter-github-pr-review to report lint results as review comments as well as console output.

module.exports = {
  rules: [
    {
      source: ["akitainu:source-git-diff", {
        before: "origin/" + process.env.GITHUB_BASE_REF,
        after: "HEAD"
      }],
      checker: ["akitainu-checker-typescript", {
        tsconfig: "./tsconfig.json"
      }]
    },
  reporters: [
    "akitainu:reporter-pretty-console",
    [
      "akitainu-reporter-github-pr-review",
      {
        "githubToken": process.env.GITHUB_TOKEN,
        "repository": process.env.GITHUB_REPOSITORY,
        "prNumber": Number(process.env.PR_NUMBER)
      }
    ]
  ]
}

Note that GITHUB_TOKEN and PR_NUMBER needs to be manunally provided through GitHub Actions settings (see below).

Set up GitHub Actions

The following is an example setup of GitHub Actions.

name: Lint with akitainu

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Fetch base branch
        run: git fetch --depth 1 origin ${GITHUB_BASE_REF}
      - run: npm ci
      - name: Run akitainu
        run: npx akitainu ./akitainurc.pr.js
        env:
          GITHUB_TOKEN: ${{ github.token }}
          PR_NUMBER: ${{ github.event.pull_request.number }}

Check how it runs akitainu with the config prepared above and provides environment variables used in the akitainu config.

Also note that we have to git fetch the base branch so that git diff can be run.

Add Check with Old Config

For more safety, you can still type-check whole source code with the old config. This may be prepared as .akitainurc.js. Read more details at Recipe: Basic ESLint and TypeScript Settings.

module.exports = {
  rules: [
    {
      source: ["akitainu:source-static", {
        files: ["./src/**/*.ts"]
      }],
      checker: ["akitainu-checker-typescript", {
        tsconfig: "./tsconfig.old.json"
      }]
    },
}