我现在拥有的代码如下所示,它遵循Next.js每页的教程(参见TypeScript部分)和 with TypeScript (或者应该说,尝试遵循.):
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import Header from "compo
我正在将类型记录集成到我的React应用程序中,它有大量的代码。我有一些应用程序级的HOCs,我将其应用于React组件,如下所示:
import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;
class MyComponent from React.Component {
...component stuff...
}
export default compose(HOC1())(MyCompone
谢谢你花时间阅读这篇文章。
我正在尝试学习使用eslint和AirBnB配置一起使用react的类型记录。像映射对象数组和使用每个对象创建自定义函数组件这样简单的事情给了我下一个错误:
Argument of type '(product: ProductType) => JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
下面是父组件ProductGrid:
const Pr
我在TypeScript中使用了TypeScript约束,如下所示:
class Animal {}
class Lion extends Animal {}
class Bear extends Animal {}
class ZooKeeper<T extends Animal> {
constructor(p: T = new Animal()) {
}
}
new ZooKeeper(new Animal());
但是p: T = new Animal()包含一个错误:
“动物”类型不能指定为“T”。
构造器动物()
--为什么是,以及我要做什
在我正在开发的React应用程序中,我将各种组件封装在我编写的自定义组件中,以完成诸如检查身份验证之类的工作。我想知道我的做法是好的还是坏的。专案小组的工作和预期一样,但我想知道我是否正在做一些不太好的事情。下面是一个示例:如果用户转到/profile,则呈现组件ProfilePage.js:
import React from 'react';
import Profile from './Profile';
import withLogin from './hoc/withLogin';
import { connect } from
我正在用写TypeScript。专案应该接受比包装组件多一个支柱,所以我写了以下文章:
type HocProps {
// Contains the prop my HOC needs
thingy: number
}
type Component<P> = React.ComponentClass<P> | React.StatelessComponent<P>
interface ComponentDecorator<TChildProps> {
(component: Component<TChildProp
我正在尝试为typescript中的React编写一个更高阶的函数:(1)需要被包装的组件的某些属性(2)允许在包装器上设置包装的组件属性(3)具有特定于包装器的属性 我基本上可以正常工作,但是当我在封装组件的匿名类上设置默认属性时,我从typescript中得到了一个我无法解决的错误。 我得到的错误是: src/withContainer.tsx:33:3 - error TS2322: Type 'typeof (Anonymous class)' is not assignable to type 'ComponentClass<P & Conta
为什么我不能仅仅根据成员x是字符串而不是数字的信息来区分这个联合呢?为什么我必须使用文本类型?
type A = { x: string ; y: string }
type B = { x: number ; y: number }
type C = A | B
function fn(p: C) {
if (typeof p.x === 'string') {
// Typescript is unable to infer p as A
// Typescript infer p.y as (string | number), why not ju
我对来自的以下代码(可在上获得)中的导出魔术感到困惑:
import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'
import firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';
import logo from './lo
我看到你像<div style={{WebkitAppearance: SOMETHING}}></div>一样做这件事,但有什么了不起的呢?
type PropType = {
appearance: string;
}
function MyComponent({
appearance
}: PropType) {
const style = {
WebkitAppearance: appearance
}
}
我得到了这个错误:
Type 'string' is not assignable to type 'We
我所知道的是,当你使用上面的typescript 3.x时,你可以使用static defaultProps = {...}来使用组件,而不需要注入道具,这就是defaultProps。
所以我在我的项目中尝试了它,但是出现了一个错误,为什么是?Property 'mod' is missing in type '{}' but required in type 'Pick<ResultsInputPanelProps, "mod">'. TS2741
//in ResultsInputPanel .tsx
expo
我正在向react函数组件传递一个prop,它可以是字符串或对象,下面是一个例子。它不需要打字就能工作。但是,当我添加typescript时,它似乎不理解属性(例如下面的helpMessage )既可以是字符串也可以是对象。
我得到这个错误TS2339: Property 'message' does not exist on type 'string | HelpMessage'. Property 'message' does not exist on type 'string'.
import React, { FC
下面使用类型冲突的Example1可以工作,但我试图声明导出以改进类型检查的尝试失败了(参见Example2和Example3)。
// @flow
import * as React from 'react'
import { connect } from 'react-redux'
// flow errors below will be the same if Props is an exact type {|...|}
type Props = {
prop1: number,
prop2: number,
}
class Exam
我试图通过TypeScript使用material-ui中的排版组件,但我收到了这个奇怪的错误
TypeScript error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLElement>, any> | FunctionComponent<HTMLAttributes<HTMLElement>> | undefined'. TS2322
8 | }
9 | export defau
我使用阿波罗客户端2与反应。当查询完成加载时,是否有回调?
我正在制作一个用户的帐户页面。电子邮件字段应该显示用户的电子邮件。我可以使用我的graphQL查询获得这个值,但是只有在组件已经挂载之后,加载才会完成。因此,我不能使用componentDidMount。是否有回调或事件,我使用setState和填充电子邮件字段的方式?
import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
class Accou
我试图用TypeScript (2.8)实现React文档(React 16.3)中的示例,但失败了。作为参考,React手册中的代码:
const ThemeContext = React.createContext('light');
// This function takes a component...
export function withTheme(Component) {
// ...and returns another component...
return function ThemedComponent(props) {
// ...