ESLint 在 TypeScript 项目中导入接口触发 no-unused-vars error

[umaim]

问题描述
用 taro init 一个新的 TypeScript 项目，eslint 对接口触发 no-unused-vars error

还有，从 this.props 而来的函数名必须要以 on 或 dispatch 开头。初始化 Demo 里的 add, minus也报错了

复现步骤
初始化一个 Typescript 项目
VSCode 打开项目，并启用 ESLint，就报错了

期望行为
正确处理 Lint 行为

报错信息
[这里请贴上你的完整报错截图或文字]

系统信息

• 操作系统: Windows 10
• Taro 版本 v1.3.0-beta.3
• Node.js 版本 10.15.3

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

第一个问题应该是 typescript-eslint 的 bug，没办法处理已经使用过的类型；
第二个没办法处理，eslint 在原理上是没有办法检测一个 props 是不是从 redux/mobx 过来的，只有从 redux/mobx 而来的可以不用遵守这条规则。我个人认为即便报错也没关系，可以提醒用户这条规则存在，更好的做法可能是加上更详细的解释。

[umaim]

第一个问题应该是 typescript-eslint 的 bug，没办法处理已经使用过的类型；
第二个没办法处理，eslint 在原理上是没有办法检测一个 props 是不是从 redux/mobx 过来的，只有从 redux/mobx 而来的可以不用遵守这条规则。我个人认为即便报错也没关系，可以提醒用户这条规则存在，更好的做法可能是加上更详细的解释。

好的，我去上游找一下解决方案吧
第二个问题，确实是从 Redux connect 进来的。

感谢解惑~

（建议在 TS 模板里添加注释，解释一下这个现象

[Garfield550]

这样写你第一个问提还有错吗？

import Taro from '@tarojs/taro';

interface Props {
  // 这边没有就不写
  // class 写成 class Index extends Taro.Component {}
}

class Index extends Taro.Component<Props, {}> {
  public config: Taro.PageConfig = {
    backgroundColor: '#000000',
    disableScroll: true,
  };

  public render(): JSX.Element {
    return (
      <View />
    );
  }
}

export default Index as ComponentType;

[umaim]

这样写你第一个问提还有错吗？

import Taro from '@tarojs/taro';

interface Props {
  // 这边没有就不写
  // class 写成 class Index extends Taro.Component {}
}

class Index extends Taro.Component<Props, {}> {
  public config: Taro.PageConfig = {
    backgroundColor: '#000000',
    disableScroll: true,
  };

  public render(): JSX.Element {
    return (
      <View />
    );
  }
}

export default Index as ComponentType;

实在不好意思，我反馈完问题就删除初始项目了（而且我的 Taro 没安装 global package，再 init 一个比较麻烦），您可以亲自 init 一个试一试。

[umaim]

第一个问题应该是 typescript-eslint 的 bug，没办法处理已经使用过的类型；
第二个没办法处理，eslint 在原理上是没有办法检测一个 props 是不是从 redux/mobx 过来的，只有从 redux/mobx 而来的可以不用遵守这条规则。我个人认为即便报错也没关系，可以提醒用户这条规则存在，更好的做法可能是加上更详细的解释。

您好 yuche，
我去上游看了看，有几个疑惑想请教一下：
从目前的项目 package.josn 以及 .eslintrc 配置来看，初始化的 TypeScript 项目中，eslint 的 plugin 使用的是 typescript-eslint ，parser 也是用的它的配套的 parser，但是 rule-config 用的是我们自己的 eslint-config-taro。但我在 taro 的 config 中，似乎没有发现有关于 typescript-eslint 的规则处理。是 eslint-config-taro 没有对 TS 的规则进行设置？还是我什么地方理解的不对？

上游 typescript-eslint 推荐的 config 中，不会有导入的接口 unused 的错误提示。（但是会触发另外更多与 Taro 风格不符的错误）。

所以我想，Taro cli 中默认模板语言已经是 TS 了，并且使用了 typescript-eslint，是不是应该针对 TS，更新一下我们的 eslint-config-taro 包，以有个更好的 TS 代码体验。

下面是我做的部分测试：
添加 typescript-eslint 配套的 @typescript-eslint/eslint-plugin 包，在 .eslintrc 中修改 rules 成如下

"rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error", {
      "varsIgnorePattern": "Taro"
    }],
    "react/jsx-filename-extension": [1, {
      "extensions": [".js", ".jsx", ".tsx"]
    }]
  }

就不会有第一个导入接口 unused 的错误了

[Garfield550]

这样写你第一个问提还有错吗？

import Taro from '@tarojs/taro';

interface Props {
  // 这边没有就不写
  // class 写成 class Index extends Taro.Component {}
}

class Index extends Taro.Component<Props, {}> {
  public config: Taro.PageConfig = {
    backgroundColor: '#000000',
    disableScroll: true,
  };

  public render(): JSX.Element {
    return (
      <View />
    );
  }
}

export default Index as ComponentType;

实在不好意思，我反馈完问题就删除初始项目了（而且我的 Taro 没安装 global package，再 init 一个比较麻烦），您可以亲自 init 一个试一试。

抱歉我项目从 1.2.22 用到 1.3.0 都没出现过这些问题

附上我的 ESLint Config

{
  "extends": [
    "taro",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

补充一下，至于为什么我会跟你提这个写法是因为，我们项目就是这样写的

[umaim]

抱歉我项目从 1.2.22 用到 1.3.0 都没出现过这些问题

附上我的 ESLint Config

{
  "extends": [
    "taro",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

补充一下，至于为什么我会跟你提这个写法是因为，我们项目就是这样写的

看起来比官方 Demo 规范唉 0.0~
不知道官方会不会借鉴一下呢？

希望会更新更好的 config 吧

[umaim]

你好 @yuche ，
升级 ESLint 似乎并没有解决问题，还是提示未使用

[Silver47Gin]

第一个问题是taro的ts模板中貌似没安装@typescript-eslint/eslint-plugin，然后no-unused-vars这个规则使用的eslint的规则，所以不识别interface，简单解决就是上面的库，把no-unused-vars改为@typescript-eslint/no-unused-vars