标签: tsx

我想这样定义jsx：

<table style={{'--length': array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

并且我在CSS中使用--length，也有一些单元格具有--count，它们使用css伪选择器（使用Counter hack）显示计数。

但打字稿显示错误：

TS2326: Types of property 'style' are incompatible.
  Type '{ '--length': number; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and ''--length'' does not exist in type 'CSSProperties'.

是否可以更改样式属性的类型以接受CSS变量（自定义属性），或者是否可以对样式对象进行强制？

为什么我可以通过创建新类型JSX.IntrinsicElements['div'] & X但无法扩展它？

我不明白错误消息——我不是简单地添加了一个“可选类型”吗？这两种不同的方式扩展类型有什么区别？

这是我将 NextJS 项目转换为 TypeScript 时遇到的问题。在我的 中_app.tsx，我遇到了类型错误：Binding element 'pageProps' implicitly has an 'any' type. ts(7031)。该错误可能如下所示：

我知道 StackOverflow 上已经有这个问题的答案，但我写这篇文章是为了让将来的人可以更容易地遇到这个问题。

我刚刚开始将 TypeScript 与 Next 结合使用。这是做什么的？ import { NextPage } from 'next'; export const Page: NextPage = () => {} 我查看了文档，但它确实很好地解释了它的作用。

我根据名称猜测它会路由页面。有人可以解释一下这是做什么的吗？

谢谢。

在我的 React 组件之一中，我对一些自定义元素进行了以下定义：

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements {
            'd3fc-group': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
            'd3fc-svg': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
        }
    }
}

我返回为：

return (
    <div ref={d3Container} className='main_layout' data-testid={'chart'}>
        <d3fc-group
            id='group'
            className='hellooo'
            style={{ display: 'flex', height: '100%', width: '100%', flexDirection: 'column' }}
            auto-resize>
        </d3fc-group>
    </div>
);

但在生成的 html 中，“className”被转换为“classname”而不是“class”属性。

<d3fc-group id="group" classname="hellooo" auto-resize="true" style="display: flex; height: 100%; width: 100%; flex-direction: column;"><div style="flex: 1 1 0%; display: flex; flex-direction: column;"></d3fc-group>

如何让它像其他组件一样转换为“class”属性？

我在一个使用TypeScript编写React组件的.Net核心Web应用程序上打开了Resharper Ultimate.

所以我有一个简单的组件类;

export class Index extends React.Component<{},{}>{

Resharper警告我

Generic type '_$_$RsRpExt"FromFile;....\node_modules\@types\react\index.d.ts, module=JavaScriptReferencedFilesModule:Referenced external files".React.Component' requires 1 type argument(s), but got 2

我的npm包反应是;

依赖关系:

"react": "^15.6.1",
"react-dom": "^15.6.1",

Dev Dependencies

"@types/react": "^15.0.39",
"@types/react-dom": "^15.5.1",

查看类型化文件,我可以看到React Component应该接收2个参数:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
    class Component<P, S> {
        constructor(props?: P, context?: any);

我正在使用webpack来编译TS/TSX文件,它一切正常,项目正常工作,但如果Resharper不能很好地使用TypeScript代码,那将会很烦人.

有人知道解决这个问题的方法吗？

使用@ types / react 16.8.2和TypeScript 3.3.1。

我直接从React文档中提出了这个前向引用示例，并添加了几个类型参数：

const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>();
<FancyButton ref={ref}>Click me!</FancyButton>;

我在下一行的最后一行中收到以下错误FancyButton：

类型“ { children: string; ref: RefObject<HTMLButtonElement>; }”不能分配给类型“ IntrinsicAttributes & RefAttributes<HTMLButtonElement>”。属性' children'在类型' IntrinsicAttributes & RefAttributes<HTMLButtonElement>'.ts 中不存在（2322）

看来React.forwardRef的返回值的类型定义是错误的，没有正确地合并在子道具中。如果我<FancyButton>自行关闭，错误就会消失。缺少针对该错误的搜索结果，使我相信自己缺少明显的东西。

在 stencil's.js 中，类选择器的 TSX 元素属性是class而不是className（如在 React 中）。

在 VSCode 中找不到更改 emmet 扩展的类属性名称的方法。

尝试了 emmet 的偏好，但没有帮助。

typescript .st-form__upload

扩展到

<div className="st-form__upload"></div>

但是我需要

<div class="st-form__upload"></div>

有人有同样的问题吗？

尝试启动 gatsby+react+typescript 项目，VSCode 只会将语法突出显示应用于我的 .tsx 文件中的 HTML。打字稿代码保持单一颜色。我该如何解决？

注意：我目前没有安装插件，如果文件类型设置为 .jsx，则突出显示有效

在 TSX 文件中，可以定义通用组件：

const MyComponent = <A,>() => <p>my component</p>

注意,后面的A。

现在，如果我想A默认string，人们自然会认为上面应该写成：

const MyComponent = <A=string,>() => <p>my component</p>

但这不起作用。

我缺少什么？