【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"}],
また、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では定義された引数は全て使われないといけません。