小编Mic*_*urz的帖子

我正在尝试构建一个事件侦听器回调来检测它的调用位置，类似于：

import { TouchEvent } from 'react'

const isInvokedFromInsideContainer = (event: TouchEvent<HTMLElement>) => {
  parentContainer = event.target.closest('#container')
  console.log('isInvokedFromInsideContainer: ' + !!parentContainer)
}

但我得到

TS2339：“EventTarget”类型上不存在属性“closest”

event.nativeEvent.target.closest都不起作用
event.currentTarget.closest，但我显然不希望这样

将目标投射为 HTMLElement 的工作原理：

const target = (event.target as HTMLElement)
const parentContainer = target.closest('#container')

这样做的正确方法是什么？

我收到以下错误：

type Union = { type: "1"; foo: string } | { type: "2"; bar: number };

function doSomething = (object: Union) => {
  const { foo } = object
  //      ^ TS2339: Property 'foo' does not exist on type 'Union'.
  console.log(object.bar)
  //                 ^ TS2339: Property 'bar' does not exist on type 'Union'.
}

期望的结果：

typeof foo === string | undefined
typeof bar === number | undefined

如何在没有显式类型保护的情况下访问属性，例如：

const foo = o.type === 1 ? o.foo : undefined
const bar …

我需要完成什么

我想制作一个简单的受控 词汇明文编辑器 - 一个由父字符串字段控制的编辑器。

但我真的很难让我的编辑同时：

1. 每当父状态发生变化时就采用它
2. Selection收养母国后保留
3. 不会仅仅因为外部值发生变化（并被采用）而自动聚焦

到目前为止我得到了什么

我尝试了一些方法，但这是我得到的最接近的 -沙盒：

export const useAdoptPlaintextValue = (value: string) => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.update(() => {
      const initialSelection = $getSelection()?.clone() ?? null;
      $getRoot().clear();
      $getRoot().select(); // for some reason this is not even necessary
      $getSelection()?.insertText(value);
      $setSelection(initialSelection);
    });
  }, [value, editor]);
};

这种方法在写入输入本身时效果很好，但强制采用value 仅在首次选择输入之前有效。在选择它之后（即使再次取消选择），编辑器仅采用一个“渲染帧”的值，然后立即使用旧值重新渲染。我显然在选择上做错了，因为：

1. 删除setSelection(initialSelection)也可以解决这个问题 - 但更新之间不会保持选择，这也是不可接受的。
2. 每次击键时我都会收到此错误：

updateEditor：选择已丢失，因为先前选择的节点已被删除并且选择未移动到另一个节点。确保删除/替换选定节点后选择发生更改。

...在我看来，initialSelection保留了对被删除的节点的引用$getRoot().clear()，但我尝试绕过它，但一无所获。

我很高兴获得有关我的代码或实现我的目标的任何建议/帮助。

谢谢

我想在.env文件中定义一个 url，然后使用cross-env package在 package.json 中使用它：

# .env
REACT_APP_TESET_URL=https://test.com

// package.json
{
  //...
  "scripts": {
    "start": "rescripts start"
    "start:test": "cross-env REACT_APP_MANUAL_URL=$REACT_APP_TEST_URL yarn start",
  }
}

但$REACT_APP_TEST_URL被解释为字符串。

我当然可以传入一个REACT_APP_ENV_NAME变量 via cross-env，然后决定在我的 React 应用程序中.env使用哪个变量与switch语句，但我更喜欢按照上面描述的方式进行操作。

有办法实现这一点吗？

我有一个受歧视的工会，例如：

type Union = { a: "foo", b: string, c: number } | {a: "bar", b: boolean }

我需要派生一个包含所有潜在属性的类型，分配有可能在 的任何成员上找到的类型Union，即使仅在某些成员上定义 - 在我的示例中：

type CollapsedUnion = { 
  a: "foo" | "bar", 
  b: string | boolean, 
  c: number | undefined 
}

我怎样才能制作一个派生出这种折叠联合的泛型？
我需要一个支持任何大小联合的泛型。

通过使用 native OmitUtility可以作为副产品实现类似的行为，但不幸的是，它遗漏了每个联合成员上不存在的属性（不将它们计入 asundefined或 via ?）。

我喜欢使用新的Component Story Formatreact-docgen-typescript ，使用我在配置中提供的组件自动生成控件：

export default {
  title: 'story name',
  component: MyComponent
} as Meta

但对于某些组件，我只想将这个自动生成的控件列表用于某些故事，而不用于其他故事。

也许就像有一个故事，其中包含所有可能道具的完整控件列表，以及多个仅展示与故事相关的道具的附加故事。这对于大型第 3 方组件上的自定义包装器的故事尤其受欢迎，这些组件通常有数百个利基道具。

我怎样才能做到这一点？

我正在使用 Lerna monorepo。我经常看到一个包从另一个包的深处进行导入，例如：

import { SomeType } from "@schema/folder/folder/file.ts"

这是不可取的，因为有时我们需要在通过.export 导出自动生成的类型之前对其进行转换index.d.ts。这有时会导致从包深处导入错误的、未转换的类型。

我想以某种方式限制一个包向其他包公开的文件/文件夹，因此这样的导入是不可能的：

import { SomeType } from "@schema" // valid
import { SomeType2 } from "@schema/folder/folder/file.ts" // invalid

我有什么选择？

我不确定我还能提供什么其他信息，因为我对这些东西几乎没有经验。

我想创建一个可以确定我的编辑器是否具有焦点的函数：

function hasFocus(editor: LexicalEditor) {
  const hasFocus = editor.getEditorState().read(() => {
      // return $...
  })
  
  return hasFocus
}

我浏览了源代码和文档，但没有找到可以直接检测到这一点的方法。在我的测试中，Selection对象似乎无法可靠地确定编辑器是否专注于 DOM。

那么，如何检测编辑器焦点呢？

我有一个组件可以包装Router并使用额外的道具。我尝试以PropsWithoutRef类似于此备忘单中使用的方式使用：

import React, { ComponentType, PropsWithoutRef } from 'react'
import { Route } from 'react-router'

type LayoutRouteProps = PropsWithoutRef<Route> & {
    component: ComponentType,
};


const DashboardLayoutRoute = ({
    component: Component,
    ...rest
}: LayoutRouteProps) => {
    const render = (props: any)=> <Component {...props} />

    return <Route {...rest} render={render} />
};

但这并没有什么好处。当我尝试使用DashboardLayoutRoute和传递与以下内容相关的道具时Route：

<DashboardLayoutRoute exact path='/' component={Home} />

我得到

错误:(63, 39) TS2322: 类型 '{ 精确：true; 路径：字符串；组件：任何；}' 不可分配给类型 'IntrinsicAttributes & Route & { component: …

我通过创建了一个新的 CRA 项目yarn create react-app my-app --template typescript，在运行开发服务器 ( yarn start)时出现以下错误：

src/App.tsx
  Line 5:24:  Parsing error: Unexpected token, expected ";"

  3 | import "./App.css";
  4 | 
> 5 | const _window = window as any;
    |                        ^
  6 | 
  7 | const App: FC<{}> = () => {
  8 |   return <div />;

我只在 cra 服务器中收到错误，IDE Typescript 引擎认为代码没有问题。什么可能导致这种情况？

我的 package.json：

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.1.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10", …