웹사이트 검색

reactjs - TSLINT 오류: 속성 'Component'가 'typeof React' 타입에 존재하지 않습니다

나는 react-native-redux-typescript-boilerplate를 다운로드했습니다. 이 프로젝트는 안드로이드 에뮬레이터에서 원활하게 실행됩니다. 그러나 특히 JSX 문법(.tsx 파일)에서 많은 tslint 오류가 있습니다. 주요 오류 중 하나는 https://reactnativeseed.com/ 입니다.

저는 코드 에디터로 WebStorm을 사용하며, WebStorm과 프로젝트에서 사용 중인 TypeScript 버전을 교차 확인했습니다. 두 버전이 동일합니다.

이것들이 버전입니다:

  1. 타입스크립트 - 2.6.2
  2. react-native - 0.59.6
  3. 리액트 - 16.2.0
  4. 리액트-리덕스 - 5.0.6
  5. @types/react - "^16.8.14"
  6. @types/react-native - "^0.47.7"

다른 확인해야 할 것이 있나요?

저는 또한 "tslint-fix": "^0.1.3"를 설치했습니다

예: index.tsx

import * as React from "react";
import { Item, Input, Icon, Form, Toast } from "native-base";
import { Field, reduxForm } from "redux-form";
import Login from "../../stories/screens/Login";

const required = value => (value ? undefined : "Required");
const maxLength = max => value => (value && value.length > max ? `Must be ${max} characters or less` : undefined);
const maxLength15 = maxLength(15);
const minLength = min => value => (value && value.length < min ? `Must be ${min} characters or more` : undefined);
const minLength8 = minLength(8);
const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address" : undefined;
const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);

export interface Props {
    navigation: any;
    valid: boolean;
}
export interface State {}
class LoginForm extends React.Component<Props, State> {
    textInput: any;

    renderInput({ input, meta: { touched, error } }) {
        return (
            <Item error={error && touched}>
                <Icon active name={input.name === "email" ? "person" : "unlock"} />
                <Input
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "email" ? "Email" : "Password"}
                    secureTextEntry={input.name === "password" ? true : false}
                    {...input}
                />
            </Item>
        );
    }

    login() {
        if (this.props.valid) {
            this.props.navigation.navigate("Drawer");
        } else {
            Toast.show({
                text: "Enter Valid Username & password!",
                duration: 2000,
                position: "top",
                textStyle: { textAlign: "center" },
            });
        }
    }

    render() {
        const form = (
            <Form>
                <Field name="email" component={this.renderInput} validate={[email, required]} />
                <Field
                    name="password"
                    component={this.renderInput}
                    validate={[alphaNumeric, minLength8, maxLength15, required]}
                />
            </Form>
        );
        return <Login loginForm={form} onLogin={() => this.login()} />;
    }
}
const LoginContainer = reduxForm({
    form: "login",
})(LoginForm);
export default LoginContainer;

위 파일의 render()에서 많은 오류가 표시됩니다. 그 중 일부는:

  1. 타입 'typeof React'에는 속성 'Component'가 존재하지 않습니다.
  2. JSX 요소 유형 'Item'은 JSX 요소에 대한 생성자 함수가 아닙니다. 'Item' 유형에 'render' 속성이 없습니다. 그리고 이와 유사한 오류가 많이 있습니다.

답변 #1

드디어 문제를 해결했습니다. @types/react는 TypeScript 버전 2.8.1을 사용하고 있었는데, 제 프로젝트는 TypeScript 버전 2.6.2를 사용하고 있었습니다. 그래서 제 프로젝트의 TypeScript 버전을 2.8.1로 업그레이드했고, 오류가 사라졌습니다.

답변 #2

React를 가져오는 것을 잊었어요

import React, { Component } from 'react';

코드 class LoginForm extends React.Component<Props, State>를 class LoginForm extends Component<Props, State>로 교체하세요

관련기사