TypeScript React 응용 프로그램의 PropType

TypeScript React 응용 프로그램의 PropType

용용을 React.PropTypesTypeScript Respect 어플리케이션에서 타당성이 있는지 아니면 단순히 "벨트와 멜빵"의 경우인지 확인합니다.

는 "Cronent Class"로 선언되어 Propsparameter: type " " "type"

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

추가함으로써 실질적인 이점이 있습니까?

static propTypes {
    myProp: React.PropTypes.string
}

클래스 정의까지요?

Typescript와 PropTypes의 용도는 다릅니다.유형 스크립트는 컴파일 시 유형을 검증하는 반면 PropTypes는 런타임에 검사됩니다.

Typescript는 코드를 작성할 때 유용합니다.Resact 컴포넌트에 잘못된 유형의 인수를 전달하면 경고가 표시되며 함수 호출에 대해 자동 완성됩니다.

PropTypes는 API에서 JSON을 로드하는 경우와 같이 구성 요소가 외부 데이터와 어떻게 상호 작용하는지를 테스트할 때 유용합니다.PropTypes는 다음과 같은 유용한 메시지를 인쇄하여 구성 요소가 실패하는 이유를 디버깅하는 데 도움이 됩니다(React's Development 모드일 경우).

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Typescript와 PropTypes는 같은 작업을 하는 것처럼 보이지만 실제로는 전혀 겹치지 않습니다.그러나 유형을 두 번 지정할 필요가 없도록 Typescript에서 PropTypes를 자동으로 생성할 수 있습니다. 예를 들어 다음과 같습니다.

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

과 TypeScript 하는 것은 큰 React.PropTypes★★★★★★★★★★★★★★★★★★.

이 경우 도움이 되는 경우가 몇 가지 있습니다.

• 플레인 JavaScript에서 사용되는 컴포넌트 라이브러리와 같은 패키지를 게시합니다.
• API 호출 결과 등의 외부 입력을 받아들이고 전달합니다.
• 적절하거나 정확한 오타가 없는 경우 라이브러리의 데이터를 사용합니다.

따라서 보통 컴파일 시간 검증을 얼마나 신뢰할 수 있느냐가 문제입니다.

에서는 TypeScript를 기반으로 할 수 .React.PropTypes )PropTypes.InferProps단에서 사용 가 어려울 수 .) , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .

@afonsoduarte가 말했듯이.

PropTypes에서 다음과 같이 Typescript 유형을 생성할 수도 있습니다.

const propTypes = {
  input: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
};

type MyComponentProps = PropTypes.InferProps<typeof propTypes>;

const MyComponent: FunctionComponent<MyComponentProps > = (props) => {
  // ...
}

MyComponent.propTypes = propTypes;

컴파일 시 소품 종류를 추측할 수 없는 지저분한 상황에서는 사용 시 발생하는 경고를 볼 수 있습니다.propTypes실행 시.

이러한 상황 중 하나는 사용자가 제어할 수 없는 외부 API 등 유형 정의를 사용할 수 없는 외부 소스로부터의 데이터를 처리하는 것입니다.내부 API의 경우, 아직 사용할 수 없는 경우 유형 정의를 작성(또는 생성)하는 것이 가치가 있다고 생각합니다.

그 외에는 별로 장점이 보이지 않습니다(그 때문에 개인적으로 사용해 본 적이 없습니다).

"Infer Prop(Infer Prop.@types/prop-types"를 사용하여 PropTypes 정의에서 유형 정의를 만들 수 있습니다.아래 예를 확인하다

import React from "react";
import PropTypes, { InferProps } from "prop-types";

const ComponentPropTypes = {
    title: PropTypes.string.isRequired,
    createdAt: PropTypes.instanceOf(Date),
    authorName: PropTypes.string.isRequired,
};

type ComponentTypes = InferProps<typeof ComponentPropTypes>;
const MyComponent = ({ authorName, createdAt, title }: ComponentTypes) => {
    return <span>Blog Card</span>;
};

MyComponent.propTypes = ComponentPropTypes;
export default MyComponent;

최근에 네이티브 코드를 브리징할 때 Proptypes와 TS를 사용했습니다.이 프로젝트는 React 측의 TypeScript로 작성되어 있으며, React 측의 네이티브 컴포넌트를 자체 파일로 추출합니다.이미 TypeScript를 통해 데이터를 검증하고 있기 때문에 PropTypes에 대해 걱정할 필요가 없습니다.

PropTypes는 이벤트 콜백 시 Swift에서 들어오는 외부 데이터를 처리하는 데 사용됩니다.PropTypes 대신 TypeScript를 사용해 보았지만 React 구성 요소를 참조하는 데 문제가 있었습니다.

궁극적으로, PropTypes를 구현하는 것이 더 쉬웠고 런타임에 데이터 검증이 완벽하게 작동했기 때문에 단점도 없는 것으로 보입니다.

상세한 것에 대하여는, 다음의 코드를 참조해 주세요.

//CoreView.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {requireNativeComponent, UIManager, findNodeHandle} from 'react-native';

const COMPONENT_NAME = 'CoreView';
const RNCoreView = requireNativeComponent(COMPONENT_NAME);

export default class CoreView extends Component {
  static propTypes = {
    label: PropTypes.array,
    onUpdate: PropTypes.func,
  };
  _onUpdate = event => {
    if (this.props.onUpdate) {
      this.props.onUpdate(event.nativeEvent);
    }
  };
  render() {
    const {label, style} = this.props;
    return (
      <RNCoreView
        style={style}
        label={label}
        onUpdate={this._onUpdate}
        ref={ref => (this.ref = ref)}
      />
    );
  }
  update = (...args) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this.ref),
      UIManager[COMPONENT_NAME].Commands.obtainLabelData,
      [...args],
    );
  };
}

그리고 네이티브 측에서는:

//CoreViewManager.m
#import <Foundation/Foundation.h>

#import "React/RCTViewManager.h"
@interface RCT_EXTERN_MODULE(CoreViewManager, RCTViewManager)

//Allow React to send data as props
RCT_EXPORT_VIEW_PROPERTY(onUpdate, RCTDirectEventBlock)

RCT_EXTERN_METHOD(
  obtainLabelData:(nonnull NSNumber *)node
  imageLocation:(nonnull NSString *)imageLocation
)

@end

그리고...

import Foundation

@available(iOS 11.0, *)
@objc(CoreViewManager)
class CoreViewManager: RCTViewManager {
  override func view() -> UIView! {
    return CoreView()
  }
  
  @objc func obtainLabelData(_ node: NSNumber, imageLocation: NSString!) {
      
      DispatchQueue.main.async {
        let component = self.bridge.uiManager.view(
          forReactTag: node
        ) as! CoreView
        component.update(value: imageLocation)
      }
    }
}

언급URL : https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application