我试图在React中的一个按钮中添加一个数据测试id属性，但是类型记录对此很生气。如何将此属性添加到所有材料组件中？
import { Button } from '@material-ui/core'
<Button dataTestId='my-test-id'>
Click Me!
</Button>
文本错误：
TS2769: No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & { children?:
浏览 3提问于2021-03-17得票数 4
回答已采纳
1回答
我正在尝试将这个React JS重写为typescript：https://codesandbox.io/s/pedantic-violet-yklku 当我尝试更改此行时出现错误： <Grid
spacing={0}
container
direction="row"
xs={3}
className={classes2.color}
width={2}
浏览 23提问于2021-09-02得票数 1
我试图为一个对象定义一个类型，它要么是一组道具，要么是(同一组道具和其他所有的道具)。特别是，我很难理解为什么TypeScript认为props2的值是有效的，因为它不匹配类型联合的任何一方：
type CommonProps = {a:number, b: number};
type OptionalProps = {c: number, d: number};
type Props = CommonProps | (CommonProps & OptionalProps)
const props1: Props = {a: 1, b: 2};
浏览 0提问于2021-10-12得票数 2
回答已采纳
有时我们可以在defineComponent函数中使用props来提取常见的道具，如下所示。两者都适用于vue2/vue3，但不适用于SFC。
// common-props.js
export default {
commonProps: {
enabled: Boolean,
readonly: Boolean,
}
}
// my-component.vue
import { commonProps } from './common-props';
export default {
props: {
...commonProps,
浏览 3提问于2021-11-22得票数 2
我正在向我的组件传递一个SVG图标道具，它是一个包含SVG组件数据的数组，但它在typescript中显示了此错误，我正在使用material UI Type '{ key: number; data: { id: number; icon: ReactNode; }; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inher
浏览 35提问于2021-10-28得票数 1
回答已采纳
我在一个基于Typescript的应用程序中有一个相当复杂的React组件。有多组道具，仅当存在另一道具时才需要/true。在Typescript中有什么方法可以做到这一点吗？我还没有用它进行过多的高级打字。
我尝试了一些有区别的联盟，但我不认为它涵盖了所有的可能性，因为可能需要任何组合或不需要这些额外的道具组。
这就是我在这里工作的地方。
interface CommonProps {
...a bunch of props...
}
interface ManagedProps extends CommonProps {
managed: true;
...props for
浏览 2提问于2019-04-25得票数 2
当一个按钮被点击时，我正试图重定向到一个注册页面，但是，我收到了一个“no overload matches this call error”。我试着在谷歌上搜索这个错误，但它似乎相当宽泛，而且我对Typescript还很陌生，所以不确定如何修复它。 我应该如何修复这个错误，当点击按钮时，我应该如何显示注册表单？ // Main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, useRouteMatch
浏览 1305提问于2020-06-20得票数 4
对于按钮链接组件，我尝试根据传递的道具在HTMLButtonAttributes或HTMLAnchorAttributes之间进行选择。我对TypeScript的了解非常有限。
我有以下类型和接口：
interface CommonButtonProps {
// custom props
}
export interface ButtonProps extends CommonButtonProps,
React.ButtonHTMLAttributes<HTMLButtonElement> {}
export interface ButtonLinkProps
浏览 7提问于2020-11-18得票数 1
给定一个类型的CommonProps
type CommonProps<T extends object = {}> = {
propertyA: string;
} & T;
使用CommonProps的不同组件。例如：
const ComponentA = (props: CommonProps) => {
return <div>ComponentA</div>;
};
还有一些组件可以用自己的工具扩展共同的道具。例如：
type ComponentBProps = CommonProps<{
propertyB: st
浏览 4提问于2022-05-26得票数 0
1回答
容器不允许输入子类型
、、、
容器是从@material-ui/core扩展而来的组件，它不接受带有React.ReactNode类型的子容器。
Layout.tsx:
import { Container } from "@material-ui/core";
type LayoutProps = {
children: React.ReactNode;
};
function Layout({ children }: LayoutProps) {
return (
<div>
<Container>{children}</Container&
浏览 4提问于2022-02-01得票数 0
回答已采纳
我想要设置一个Typescript项目，该项目使用Material-UIv4.11.4来使用情感进行样式设置，为MUI v5版本做准备。我们的目标是将情感引入到项目中，以便开发人员可以开始使用新的样式，而不是通过即将被弃用的makeStyles函数继续编写样式。 除了我从css属性的Typescript中得到了一个类型错误之外，我已经把所有的工作都做好了。我一直在文档中寻找答案，但似乎什么也找不到。为了让Typescript理解MUI组件上存在的css属性，我需要安装一些额外的类型包吗？ import { Button } from "@material-ui/core";
浏览 12提问于2021-05-09得票数 3
回答已采纳
我想编写一个名为ProptyDontHaveChildren的接口，它没有名为children的程序
type ChildrenType = Array<number>
interface ProptyDontHaveChildren {
// doesn't have property called children
[index: string]: string;
}
interface WithChildren {
children: ChildrenType
}
type IntersectionType = ProptyDontHave
浏览 3提问于2017-09-20得票数 3
回答已采纳
我几天前开始学习使用typescript的react，我得到了这个错误 /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx
TypeScript error in /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx(118,22):
No overload matches this call.
Ove
浏览 156提问于2020-12-03得票数 0
回答已采纳
我正在尝试将我的React项目转换为TypeScript，并被困在这个登录组件上。我使用的是react google登录，在使用renderProps时，我在这里得到了以下错误：
Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more
浏览 13提问于2022-01-03得票数 0
回答已采纳
我在React和typescript中使用插槽系统。问题是我找不到一个包含slot作为属性的接口，所以我从我的typescript检查器中得到一个错误： Property 'slot' does not exist on type 'IntrinsicAttributes & IStockProps & { children?: ReactNode; }'.
浏览 14提问于2019-09-30得票数 1
回答已采纳
我有反应& TypeScript项目。下面是一些组件中的文件夹结构，如下所示：
- ComponentFolder
- index.tsx
- types.d.ts
- ChildComponent
- index.tsx
我知道，如果我将我的类型放在组件目录根目录的types.d.ts文件中，我可以在这个目录中的childComponents中使用这些类型。
所以我试了；
我的types.d.ts文件：
export type CommonProps = {
openItem: string;
getValue: (e: React.MouseEvent
浏览 2提问于2020-05-02得票数 1
可以肯定的是，在Typescript中实现Scalas下划线是不可能的，这是我两年来最喜欢的项目，但还不能完全实现。
我唯一关心的类型是“下划线”，其他的都忽略不计。
const buildUnderscore = (f: any) => (path: any[]): any => new Proxy(f, handler(path));
const handler = (path: any[]) => ({
get: function(obj: any, prop: any, value: any) {
return buildUnderscore(
浏览 2提问于2018-12-21得票数 2
我做了一个基于的定制链接组件。下面是代码：
import classNames from 'classnames';
import {forwardRef} from 'react';
import MuiLink, {LinkProps as MuiLinkProps} from '@material-ui/core/Link';
import NextLink, {LinkProps as NextLinkProps} from 'next/link';
import isString from 'lodash/isS
浏览 11提问于2021-05-22得票数 0
回答已采纳
1回答
我有这个代码，我得到了这个错误：
No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses>; ... 14 more ...; zeroMinWidth?: boolean; } & CommonProps & Omit<...>
浏览 2提问于2021-11-22得票数 1
回答已采纳
我用Java编写了下面的Utility类。
public class Utils {
private static Properties commonProps;
private Utils() {}
private static setCommonProps(Properties commonProps) {
Utils.commonProps = commonProps;
}
public static boolean staticMethod1() {
comm
浏览 0提问于2017-09-27得票数 1
Typescript linter希望在transform返回的所有类型中看到属性children。当我已经编写了check prop || []时，我如何修复它？
interface NestedItem{
children?: NestedItem[]
}
function buildTree<Item, TransformedItem extends NestedItem>(
data: Item[],
transform: (item: Item) => TransformedItem | Item = item => item
) {
cons
浏览 2提问于2021-01-20得票数 0
我对TypeScript很陌生，并试图了解如何将React代码转换为被键入的代码。目前，我得到了以下错误：
Property 'openMenu' does not exist on type '{ children?: ReactNode; }'
Property 'toggle' does not exist on type '{ children?: ReactNode; }'
Property 'slidein' does not exist on type '{ children?: ReactN
浏览 0提问于2019-09-30得票数 0
回答已采纳
假设我们有下面的Typescript interface interface Sample {
key1: boolean;
key2?: string;
key3?: number;
}; 在这种情况下，key1始终是必需的，key2始终是可选的，而如果key1为true，则key3应该存在，如果key1为false，则不应该存在。换句话说，一个键的出现取决于另一个键的值。我们如何在Typescript中实现这一点？
浏览 49提问于2018-07-19得票数 30
回答已采纳
我正在尝试创建一个基于MUI对话框的可重用Dialog组件。 下面是我的代码： import React from 'react';
import {
Dialog as MuiDialog,
DialogProps,
Button,
DialogContent,
DialogActions,
DialogTitle,
} from '@material-ui/core';
const Dialog = ({ title, open, onClose, children, ...props }: DialogProps) =>
浏览 27提问于2021-10-28得票数 1
回答已采纳
我在Angular2中有以下类
export class Person {
public children: Person[] | (() => Person[])
}
所以，我的目的是让children属性成为一个函数的数组，它可以让我得到这个数组。不深入为什么这个类是这样构造的，我想看看是否有人在尝试调用person.children()时遇到过关于类型的typescript编译的相同问题。
错误是：
Cannot invoke an expression whose type lacks a call signature
现在，如果我将person转换为"any&
浏览 3提问于2016-05-26得票数 0
我需要传递null值，但我得到了一个错误，如何扩展此类型？
TS2769:没有重载匹配此调用。(道具：{ href: string；}&{ autoFocus?：布尔值未定义；类？：部分未定义；稠密？：布尔值未定义；禁用？；disableGutters?：布尔值未定义；分隔符？：布尔值未定义；选择？：布尔值？：未定义的布尔值；}& Omit<...> & CommonProps & Omit<...>)：元素‘，给出了以下错误。无法分配“ReactNode&{ href: string；}&{ autoFocus?：布尔
浏览 14提问于2022-05-18得票数 0
我有一个反应功能组件的问题，并默认一个必要的支柱。
以下是组件：
type Props = { message: string };
function Greeting({ message = "How are you?" }: Props) {
return <p>{message}</p>;
}
我应该能够在不传递message道具的情况下使用它：
<Greeting />
但是，TypeScript引发的类型错误属性“message”在“{}”类型中缺失，但在类型“Props”中却是必需的。
下面是CodeSandbox：
浏览 3提问于2020-02-11得票数 1
回答已采纳
我知道这已经被详细讨论过了，但没有其他解决方案似乎有效，或者我在实现它们时失败了。
我是一个全新的typescript新手，并且有以下几点：
import faker from "faker";
import React from "react";
import Index from "../components/Index";
import List from "../components/List";
interface Props {
departments: [
{
id: number;
浏览 23提问于2020-05-28得票数 1
回答已采纳
1回答
我编写了一个特殊的函数，我无法正确地输入(这是预料中的，因为我是TypeScript初学者，甚至是一个类型的初学者)。以下是功能：
const withLayout = (LayoutComponent, layoutProps = {}) => (WrappedComponent) => {
return function WithLayout(props) {
return (
<LayoutComponent {...layoutProps}>
<WrappedComponent {...props} />
浏览 2提问于2021-03-15得票数 0
回答已采纳
第一次看到这样的错误，所以请容忍我。
我正在做一个项目，打开了一个文件进行更改。我打开了文件，实际上没有做任何更改，只是使用更漂亮的格式化文件。
就在格式化时，项目抛出了下面的错误：
TypeScript error in C:/Users/name/source/repos/UsedEquipment/src/pages/listings/sections/SearchResultListings.tsx(253,16):
Type '{ style: { height: string; }; type: "rect"; ready: false; showLoadi
浏览 324提问于2021-02-23得票数 1
回答已采纳
1回答
我从typescript中得到以下代码错误，但我不知道确切的原因，因为IBlockchainContextValue已经有了它的IBlockchainContextState类型的状态属性，同时它已经有了所有这些加载，帐户...属性...也许更好的做法是查看代码和附带的图像来理解Typescript问题。
// Blockchain context
import React from 'react';
interface IBlockchainContextState {
loading: boolean;
account: string;
tokemonTok
浏览 1提问于2021-09-26得票数 1
我的应用程序有很多TypeScript错误，但运行正常(我将一个javascript应用程序移到了typescript，现在无法修复所有的类型问题……)。我已经设置了我的编辑器(webstorm)来忽略这些错误，然后应用程序就会编译。
运行应用程序(JiT)运行得很好，但是当我尝试用AoT编译应用程序(我遵循了)时，我得到了所有的TypeScript错误，编译失败。我不能粘贴所有的错误(有太多的错误)，但这里有一个示例：
Error at C:/app-path/services/app.service.ts:18:23: Property 'saveScroll' does
浏览 0提问于2016-11-20得票数 5
回答已采纳
我正在尝试创建一个组件，它可以使用3个接口中的一个来根据传递给它的道具来确定哪个接口。
interface CommonProps {
label: string;
icon?: React.ComponentType;
role?: string;
}
interface ButtonProps extends CommonProps {
handleOnClick: () => void;
selected?: boolean;
largeVariant?: boolean;
}
interface LinkProps {
to: string;
浏览 4提问于2020-01-12得票数 3
我使用yarn create react-app app-name --template typescript创建了一个react应用程序，下面是我的代码
AuthProvider.tsx
import { createContext, useState } from "react";
const AuthContext = createContext({ });
export const AuthProvider = ({ children }: any) => {
const [auth, setAuth] = useState({});
re
浏览 3提问于2022-05-20得票数 1
我使用的是带有typescript的Socket.io v4.0.1和一个节点/express服务器，它可以正常工作。问题是，在连接时，我希望向客户端套接字发出它的sessionID和userID，这是我的服务器套接字实例上的附加属性，但typescript抛出了以下类型错误。 io.on("connection", (socket: Socket): void => {
console.log(socket.id);
socket.emit("session", {
sessionID: socket.sessionID, // pr
浏览 132提问于2021-05-04得票数 2
回答已采纳
如何避免对直接在typescript中呈现的组件注入React.children.map的道具进行类型检查？
type ContainerProps = {
children: JSX.Element[];
};
export const Container: React.FC<ContainerProps> = ({ children }) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
return (
<React.Fragment>
浏览 0提问于2020-10-01得票数 0
使用TypeScript，可以创建至少需要两个属性中的一个的类型。(至少)有两种方法可以做到：和。这两种解决方案效果很好。当这两个属性都没有指定时，我能够创建并获得所需的编译器错误。
但是，当使用最终类型指定react组件中的支持时，编译器无法找到两个“必需”属性。下面是一个简化的示例：
interface Base {
text?: string;
}
interface WithId extends Base {
id: number;
}
interface WithToken extends Base {
token: string;
}
type Identifiable
浏览 1提问于2018-08-17得票数 3
回答已采纳
我对Typescript是个新手，我一直在尝试处理那些typescript呕吐的错误信息。我花了几个小时的时间来搜索下面的内容：
ERROR in [at-loader] ./src/Radio/styles.tsx:142:3
TS2322: Type 'StyledComponent<"input", WireframeTheme, {}, never>' is not assignable to type 'StyledComponent<"input", WireframeTheme, RadioStyl
浏览 0提问于2020-06-12得票数 1
我创建了自己的自定义主题，并尝试将我创建的一种颜色添加到按钮上，但当我尝试将其设置为： color={theme.pallete.lightGrey} 我得到了这个错误： No overload matches this call
Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "
浏览 18提问于2021-09-08得票数 0
1回答
使用时的类型参数
、、
我试图在我的应用程序中构建一个通用工具来处理对 useQuery请求的响应，并使用TypeScript构建这个工具，以便正确地输入数据。
在父组件中，用例如下所示：
const queryResult = useQuery<MyResponseType, Error>('whatever');
return (
<ReactQueryLoader useQueryResult={queryResult}>
{data => {
// Data should be of MyResponseType type, but is
浏览 3提问于2022-05-13得票数 0
回答已采纳
我试图用TypeScript创建一个扩展React.Component的类，但是我遇到了以下错误：
Class 'Provider' incorrectly extends base class 'Component<{}, {}>'.
Types of property 'render' are incompatible.
Type '(props: any) => any' is not assignable to type '() => false | Element'.
下面是代码
浏览 3提问于2017-10-05得票数 0
回答已采纳
我对我的React组件有下面的声明，它以前是在TypeScript 2.2中编译的，但现在它是TypeScript 2.3中的一个错误。
class MyComponent extends React.Component<void, {}> {
render() {
return <div> Hello </div>
}
}
// TS 2.3 : error TS2322: Type '{}' is not assignable to type
// 'IntrinsicAttributes & Intr
浏览 2提问于2017-04-27得票数 2
回答已采纳
1回答
使用React(ReactNative)。
我想继承组件类，但在这种情况下会出现流错误。
/* @flow */
import React, { Component } from 'react';
import { Text, View } from 'react-native';
type commonProps ={
actions: Object,
};
type someProps = commonProps & {
someNumber: number,
};
class CustomComponent extends Com
浏览 2提问于2018-09-15得票数 0
使用带有for的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件道具都可以有子组件：
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
但是，对于无状态功能组件，情况似乎并非如此：
const MyStatelessComponent =
浏览 2提问于2016-11-22得票数 139
回答已采纳
1回答
考虑到我们有一个React组件，它依赖于不同的支持，可以呈现<button>或<a>，也可以呈现路由器<Link>。
不确定在这种情况下是否可能，但是我们如何使这个组件过载以接受每种情况的正确道具？
const Button: FC<ButtonProps> = forwardRef(
(
{
className,
disabled,
onClick,
children,
href,
to,
downloadable,
...rest
浏览 11提问于2022-05-11得票数 0
5回答
我有一个包含多个常用键值道具的对象，我想将这些道具传递给一些jsx。就像这样：
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />
我希望它能起到传递个人道具的作用：
<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>
这个是可能的吗？
浏览 0提问于2018-03-03得票数 133
回答已采纳
我想在cmd中使用eslint来检查ts文件，但是它不能得到我在IDE中得到的错误信息。 我在eslintrc.js中设置了@typescript-eslint/解析器。和eslint，它在cmd中运行时，当我做错了一些事情时，它会给我一些ts错误。但没有发现其他一些错误的地方。 我有一个包含代码的ts文件： interface Item {
name: string;
age: number;
}
const config: Array<Item> = [{
name: 'foo',
}] 所以，我在IDE中遇到了一些错误： Property
浏览 26提问于2019-10-18得票数 1
在typescript中，我创建了一个具有可选属性和方法的类。在该类的方法中，我想访问类型属性(以类型安全的方式，所以如果它们存在的话)。
我试过这样做：
class MyClass {
body?: string;
children?: MyClass[];
static subs(): MyClass[] | undefined {
if (this.children) {
return this.children;
}
}
}
并得到以下错误：
Property 'children' does not exist on typ
浏览 9提问于2021-02-18得票数 0
回答已采纳
尝试使用TypeScript和React的useContext。我以为我已经弄清楚了，但得到了一个错误，说明当我拆除定制钩子的结构时，道具并不存在。
这是我的自定义钩子--我看到的没有TypeScript错误
type AppContext = {
handleLogin: HandleLogin;
};
type HandleLogin = (email: string, password: string) => void;
const AuthContext = createContext<AppContext | null>(null);
export con
浏览 4提问于2022-10-01得票数 -1
回答已采纳
1回答
我对TypeScript还是个新手。以下哪一项声明在社区中更受欢迎?为什么？ interface MyComponentProps {
children: ReactNode;
}
// Option 1
const MyComponent: React.FC<MyComponentProps> = ({ children }) => <>{children}</>;
// Option 2
const MyComponent = ({ children }: MyComponentProps) => <>{children
浏览 30提问于2019-10-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
