小编Nat*_*sha的帖子

在“codesandbox.io”上，我如何配置“Prettier”以不再更改我的换行符（或者可能完全停用“Priettier”）？

另外，我如何在那里停用 ESLint 中的某个规则（在我的情况下react-hooks/rules-of-hooks是我想关闭） - 在我的 ES201x 项目中似乎忽略了一个新创建的“eslintrc”文件？谢谢。

请看下面的小演示：

\n
• 函数f应该接受一对 [\'stringX\', \'stringXstringX\'] 形式（-> 这是有效的）
\n
• 但函数g应该接受可变数量的此模式对。\n我如何输入函数g才能实现这一点？
\n

function f<T extends string, U extends `${T}${T}`>(arg: [T, U]) {}\nfunction g(...args: ???[]) {} // what\'s the right type here (-> ???)?\n\nf([\'a\', \'aa\']) // ok\nf([\'a\', \'ab\']) // error as expected\n\ng(\n  [\'a\', \'aa\'], // should be okay\n  [\'b\', \'bb\'], // should be okay\n  [\'c\', \'ab\']  // should result in a compile error!!!\n)\n

\xc2\xbb TypeScript 游乐场

[编辑] 当然，我可以更改函数g以将 n 个可选参数与 2*n …

[编辑：我已经简化了原来的问题]

假设我要严格按照下列方式来定义UI组件（以下行，不得以任何方式改变-这将改变以下线的任何解决方案是不坦白我找...例如只写一个解决方案render({ name: 'World' }) 是不是一个选择...非null断言运算符也不...没有使用currying或生成器模式或诸如withDefaultProps辅助函数之类的东西...等等....这些只是实际的解决方法（但仍很容易使用）问题如下：

// please do not change anything in this code snippet

type HelloWorldProps = {
  name?: string
}

export default component<HelloWorldProps>({
  displayName: 'HelloWorld',
  defaultProps: { name: 'World' },

  render(props) {
    // the next line shall NOT throw a compile error
    // that props.name might be undefined
    return `HELLO ${props.name.toUpperCase()}`

    // [Edit] Please ignore that the function returns a string
    // and not a virtual element or whatever - this is not important …

lit-html 有没有像 React 的ref特性那样的变化？例如，在以下伪代码中，inputRef将是一个回调函数或一个对象{ current: ... }，其中 lit-html 可以在创建/附加输入元素时传递/设置输入元素的 HTMLElement 实例。

// that #ref pseudo-attribute is fictional
html`<div><input #ref={inputRef}/></div>`

谢谢。

[编辑2022-10-17] 事实证明，我下面的问题可能很难理解。请在此处找到该问题的替代版本。希望这更容易理解： https: //jsbin.com/bixumazugi/edit?html, output

请看下面的演示：

https://jsbin.com/nubosuwede/1/edit?html,输出

通过 CSS 自定义属性--is-colored，--is-monochrome您可以控制 HTML 输出是彩色的还是仅是灰色和黑色的。

要切换到单色：

  --is-colored: var(--off);
  --is-monochrome: var(--on);

切换到彩色：

  --is-colored: var(--on);
  --is-monochrome: var(--off);

演示中的一切都按预期工作。但是，如果不显式设置默认值（请参阅正文样式），如何才能实现相同的效果呢？“彩色”仍应隐式默认。

当然，现实世界的用例是完全不同的，而且要复杂得多，但这个演示的目的是在一个小小的愚蠢的演示中提供尽可能简单的实际问题（[编辑2022-10-17]它不是关于特别是颜色，它是关于设置任何可能的 CSS 值，仅取决于 CSS 自定义属性......我猜“技巧”使用calc在这里通常不起作用）。另请注意，这个问题仅在您开发组件库（在我的例子中是 Web 组件）时才存在，当然，如果您正在开发应用程序，则这不是问题。

使用 CSS 预处理器或 JavaScript 不是我正在寻找的解决方案。

[编辑 - 2022-10-16] 请注意，该解决方案必须在影子 DOM 中工作，例如在自定义元素槽中。任何继承的自定义 CSS 属性在设计上都可在 Shadow dom 中使用，但类则不然。

[编辑 - 2022-10-17] 我想，我上面的问题不够清楚，对此感到抱歉。基本问题是我想根据某个 CSS 自定义属性来制作样式（任何样式！！！ - 我不知道这些样式、颜色或其他任何东西，因为它们都是由我的库的用户定义的）--xyz。不幸的是，目前这在 CSS 中还不能直接实现。下一个最好的办法是使用两个 CSS 属性作为技巧或解决方法：--xyz: inherit;and --not-xyz: ;（或反转：--xyz: ;and --not-xyz: inherit;）。现在您可以使用例如background-color: var(--xyz, …

在我的 TypeScript/React 项目中，“react-scripts start”显示未在我的 Visual Studio Code IDE 中内嵌显示的类型错误。大多数类型错误实际上是内联显示的，但不是全部。那可能是什么原因？如何让 Visual Studio Code 直接显示所有错误？

VS Code 设置“typescript.validate.enable”设置为 true

我的 tsconfig.json：

{
  ...
  "compilerOptions": {
    ....
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    ...
  }
  ...
}

假设您正在使用 React 并且正在编写一个自定义钩子useSomething，每次为同一组件调用该钩子时，该钩子都会返回相同的内容。

const something = useSomething()

// useSomething() at time X  === useSomething() at time Y

something如果您现在在 a 内部使用此值useEffect(() => ...)，并且没有将其something作为依赖项传递给第二个参数的数组，那么useEffectlinter 会警告您：

React Hook useEffect 缺少依赖项：“something”。包含它或删除依赖项数组。（反应钩子/详尽的依赖）

当然，ESLint 无法知道它something总是保持相同（每个组件），但是添加不变的东西（例如每次使用它们时something的依赖数组）useEffect确实很烦人。仅停用react-hooks/exhaustive-deps似乎也不是一个好的解决方案（也不使用// eslint-disable-next-line react-hooks/exhaustive-deps）。

useEffect有没有更好的解决方案，而不是为了让 Linter 满意而将不必要的东西添加到依赖项数组中？

请在这里找到一个简单的演示： https: //codesandbox.io/s/sad-kowalevski-yfxcn [编辑：请注意，问题是关于上面描述的一般模式，而不是关于这个愚蠢的小演示 ​​- 这样做的目的demo 只是显示 ESLint 警告，没有别的]

[编辑] 请在此处找到附加演示： https ://codesandbox.io/s/vibrant-tree-0cyn1