mizzsugar’s blog

日々感じていることや学んだことを書きます。エンジニアリング以外にも書くかもしれません。

【TypeScript】型定義のためだけにimportしたクラスやインターフェースがno-unused-vars扱いされて困った話

原因を知れば大したことなかったんですけど解決まで苦戦したので備忘録を残します。


linterはeslintを使っています。

Typescript 3.7
Typescript-eslint-plugin 2.3


pages/user/registration

  
<template>
  <div class="container">
    <user-edit
      :on-submit-callback="onSubmit"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { AxiosResponse } from 'axios'
import UserEdit from '@/components/UserEdit.vue'  // フォームのコンポーネントです。
import { DraftUser, User } from '@/libs/sampleapi'

@Component({
  components: {
    UserEdit
  }
})
class Page extends Vue {
  async onSubmit (draft: DraftUser) {
    const draftUser: DraftUser = {
      name: draft.name,
      email: draft.email,
      password: draft.password
    }
    const [success, response] = await (async (): Promise<[boolean, AxiosResponse<User>]> => {  // AxiosResponseとUserがno-unused-varsとされます。
      try {
        const response = await this.$sampleapi.registerUser({ draft: DraftUser })  // ユーザーを登録するAPIです。DraftUserがno-unused-varsとされます。
        return [true, response]
      } catch (err) {
        return [false, err.response]
      }
    })()
    if (success) {
      this.$toast.success('ユーザーを登録しました。')  // 成功した旨のトーストを表示します。
      this.$router.push(`/user/${response.data.id}`)  // 登録したユーザーの詳細画面に遷移します。
    } else {
      this.$toast.error('ユーザーを登録に失敗しました。')  // 失敗した旨のトーストを表示します。
      // エラーの描画は省略します。
    }
  }
}
export default Page
</script>


APIはこんな感じです。Axiosでの通信部分はOpenAPI generatorのコマンドで作ってくれるのですが

作成してくれたaxiosの部分のソースが人間に優しくなかったのでyamlファイルだけ掲載します。

openapi.yaml

openapi: 3.0.2
info:
  title: SAMPLE API
  version: 0.0.0
paths:
  /auth.register_user:
    post:
      summary: ユーザーを登録します。
      operationId: register_user
      security:
        - bearerAuth: []
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                host_id:
                  type: integer
                draft_plan:
                  $ref: '#/components/schemas/DraftUser'
              required:
                - draft
      responses:
        201:
          description: ユーザーを登録しました。
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        400:
          description: リクエストのパラメータが不当です。
          content:
            application/json:
              schema:
                type: object
                properties:
                  errors:
                    type: array
                    items:
                      $ref: '#/components/schemas/ParameterError'
                required:
                  - errors
components:
  schemas:
    DraftUser:
      type: object
      description: 登録対象のユーザー情報
      properties:
        name:
          type: string
        email:
          type: string
        password:
          type: string
      required:
        - name
        - email
        - password
    User:
      type: object
      description: 登録済みのユーザー
      properties:
        id:
          type: integer
        name:
          type: string
        email:
          type: string
      required:
        - id
        - name
        - email
    ParameterError:
      type: object
      properties:
        field:
          type: string
        code:
          type: string
      required:
        - field
        - code
  securitySchemes:
    bearerAuth:
      type: http
      scheme: bearer

Linterコマンドを実行すると

eslint --ext .js,.vue,.ts, --ignore-pattern **/*.d.ts --ignore-path .gitignore

AxiosResponseとUserとDraftUserがno-unused-varsでひっかかってしまいました…


eslintrcの内容が原因でした。

eslintrc.js

extends: [

 'plugin:nuxt/recommended’,
 '@nuxtjs',
],
plugins: [
 'typescript’,
 '@typescript-eslint’,
],
rules {
 'typescript/no-unused-vars': 'error',
…
}

こちらです。

'typescript/no-unused-vars': 'error',

typescript-eslintを使っているので@typescript-eslintのno-unused-varsにすべきでした。

~~’typescript/no-unused-vars': 'error',
"@typescript-eslint/no-unused-vars": ["error", { args: "none"}],

Improve documentation for `typescript/no-unused-vars` · Issue #46 · typescript-eslint/typescript-eslint · GitHub

また、argsは引数に使われているかどうかのチェックに使われます。 関数の引数に使われていなくても良いのでnoneとしました。

Noneの他のオプションだと Aster-usedでは、最後に利用された後に利用される位置引数全てがチェックされます。最後に利用された引数の前の位置引数はチェックされません。

/*eslint no-unused-vars: ["error", { "args": "after-used" }]*/

// 2 errors, for the parameters after the last used parameter (bar)
// "baz" is defined but never used
// "qux" is defined but never used
(function(foo, bar, baz, qux) {
  return bar;
})();

Allでは定義された引数は全て使われないといけません。

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md#args