打字稿缺少分号 linting 错误答案

【问题标题】：Missing semicolon linting error with typescript打字稿缺少分号 linting 错误
【发布时间】：2021-07-02 14:33:37
【问题描述】：

所以我有一个故事书项目，其故事文件如下：

import { Meta } from '@storybook/react';

// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
// Useful to prevent the full remount of the component's story.
export default {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
} as Meta;

工作正常，但我在} as Meta; 收到一个 eslint 错误，提示 } 后面缺少分号，这显然不起作用。

到目前为止，只有我见过的解决方案建议一起关闭分号 linting 规则。假设我可以对我的eslintrc.json 进行一个简单的调整，但还没有遇到过。

eslintrc.json

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "env": {
        "browser": true,
        "jquery": true,
        "es6": true,
        "jest": true
    },
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
    "block-spacing": "error",
    "brace-style": "error",
    "comma-spacing": "error",
    "complexity": ["error", 21],
    "curly": "error",
    "dot-location": [
      "error",
      "property"
    ],
    "guard-for-in": "error",
    "indent": [
      "error",
      2,
      { "SwitchCase": 1 }
    ],
    "key-spacing": "error",
    "keyword-spacing": "error",
    "lines-between-class-members": "error",
    "max-depth": "error",
    "new-cap": "error",
    "no-eval": "error",
    "no-whitespace-before-property": "error",
    "react/jsx-tag-spacing": "error",
    "react/prop-types": 0,
    "semi": [
      "error",
      "always"
    ],
    "space-before-blocks": "error",
    "space-infix-ops": "error"
  },
    "globals": {
        "process": true,
        "maestroStrings": true,
        "GLOBAL_BrowserTimeZone": true,
        "profiseeConfig": true,
        "Mdm": true,
        "apiRequestVerificationToken": true,
        "LoadReportPart": true,
        "FilterSortDialog": true,
        "module": true,
        "global": true,
        "_profHandling401": true
    }
}

【问题讨论】：

你的eslintrc.json 配置是什么？什么是打字稿版本？我试图重现该错误，但无法重现。
v4.3.5。将 json 添加到 OP
还添加了截图

标签： javascript reactjs typescript eslint

【解决方案1】：

这应该可行：

const Meta = {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
};

export { Meta as default };

如果你想要一个命名的导出，你也可以这样做：

export const Meta = {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
};

【讨论】：

Meta 是一个故事书导入，必须为我设置对象as（或使用其他语法）以避免其他输入错误
实际上，可能会起作用。我唯一需要转换的是story 参数，它似乎是() => StoryFnReactReturnType... 只需要弄清楚从哪里导入它:-)

【解决方案2】：

解决了这个问题，但无法确定 story 属性的类型导入

const Story = {
  component: ContextButton,
  title: "ContextButton",
  argTypes: { onClick: { action: "Button clicked" },  },
  decorators: [
    // should be narrowed down from `any` to `StoryFnReactReturnType` but can't find the type import for it ?
    (story: () => any) => (
      <div style={{height: "90vh", width: "90vw", display: "flex", "alignItems": "center", "justifyContent": "center"}}>
        {story()}
      </div>
    ),
  ],
}; 
export { Story as default };

【讨论】：