이에 대한 설명서가 명확하지 않을 수 있지만 Props 인터페이스에서 속성을 선택 사항으로 표시해야합니다.

interface Props {
    name: string;
    optional?: string;
}

릴리스 노트의 내용과 일치하지 않는 것 같습니다.

export interface Props {
    name: string;
}

// ...

function Greet({ name = "world" }: Props) {
    return <div>Hello {name.toUpperCase()}!</div>;
}

prop을 선택적으로 만드는 것은 컴포넌트 외부에서 (테스트에서) props에 접근 할 때 유형 시스템이 prop이 항상 존재한다고 보장하지 않는다는 것을 의미합니다.

예:

const wrapper = shallow(<Test/>);

// optional is string | undefined instead of string
const optional = wrapper
        .find(Component)
        .props()
        .optional;

optional 가 함수 였다면 실행하기 전에 존재하는지 확인해야합니다. 예를 들어 preventDefault 만 호출하는 기본 onClick prop을 제공하는 경우입니다.

TypeScript 3.1 이상에서는 다음을 작성할 수 있어야합니다.

export interface Props {
    name: string;
}

function Greet(props: Props) {
    return <div>Hello {props.name.toUpperCase()}!</div>;
}
Greet.defaultProps = {
  name: "world",
} as Partial<Props>; // Good practice, without it you could use a number as default prop and TypeScript wouldn't complain…

const component = <Greet />; // no errors

기본 이니셜 라이저 기능을 사용하면 기본 소품에서 작동하지 않는 버그입니까? 릴리스 노트에 제공된 예제가 최신 TypeScript 버전에서 작동하지 않는다는 점을 감안할 때 회귀처럼 보입니다.

@tbassetto 문제는 TS가 실제로 기본값을 제공하도록 강요하지 않는다는 것입니다.

import React from 'react';

interface Props {
  myProp: string;
}

const Comp = (props: Props) => {
  return (
    <div>
      {props.myProp.toUpperCase()}
    </div>
  );
};

Comp.defaultProps = {

} as Pick<Props, 'myProp'>;

const comp = <Comp />;

또 다른 성가신 점은 처음에이 작업을 수행해야한다는 사실입니다. Comp 를 React.FC<Props> 로 입력하면 defaultProps 는 잘 입력되지만 다른 문제가 발생합니다. .

대체로 현재 TypeScripts JSX / React 지원은 이상하게 완벽하지 않은 "상태 인 것처럼 보이지만 모든 것이 정상인 것처럼 실행 중입니다 (적어도 내 눈에는-주로 솔리드를 찾을 수 없습니다. 3.4.5에 대한 유형 안전 방식으로 상태 비 저장 React 구성 요소를 수행하는 "공식"방식이 무엇인지에 대한 참고 사항).

모든 사람들이 해결 방법을 언급하는 것을 보았지만 그들 중 어느 것도 작동하게 할 수는 없습니다.

버전 3.3.3입니다.

export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;

왜 이것이 여전히 오류를 던지는 지에 대한 통찰력이 있습니까?

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

나는 # 27425와 # 519에서 제안 된 모든 수정을 시도했다.

@tomspeak 내 해결 방법 또는 @Hotell 의 woraround (모든 소품을 선택 사항으로 만들지 만) 중 하나입니다. 샘플 코드로 3.5에서 테스트되었습니다.

모든 사람들이 해결 방법을 언급하는 것을 보았지만 그들 중 어느 것도 작동하게 할 수는 없습니다.

버전 3.3.3입니다.

export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;

왜 이것이 여전히 오류를 던지는 지에 대한 통찰력이 있습니까?

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

나는 # 27425와 # 519에서 제안 된 모든 수정을 시도했다.

shouldTruncateContent : boolean; 선택적 shouldTruncateContent?: boolean;

이에 대한 설명서가 명확하지 않을 수 있지만 Props 인터페이스에서 속성을 선택 사항으로 표시해야합니다.

interface Props {
    name: string;
    optional?: string;
}

이 옵션 유형을 모든 곳에서 사용하고 있습니다. 왜 반대표? 누군가 설명 할 수 있습니까?

@ralexhassle , 나는 아래 표를 설명 할 수 없지만 이것이 구성 요소의 선택적 속성을 입력하는 올바른 방법임을 설명 할 수 있습니다.
질문의 예에서 사용하지 않는 defaultProps 사용하는 것을 선호 할 수 있지만 내가 아는 한 선택적 속성을 선택 사항으로 표시하는 것은 아마도 완벽하게 괜찮습니다 ...

문제의 목적은 props가 선택 사항이 아니지만 기본값이 있다는 것입니다 (따라서 구성 요소를 사용할 때 알 수 없음). ? 로 prop을 선택적으로 표시하면 TS는 정의되지 않은 것으로 간주하고 해당 케이스를 처리하도록합니다. 그러나 기본값이 있으므로 정의되지 않습니다. 반대 투표는 해설자가 문제를 이해하지 못하고 3.0 릴리스 노트와 모순되는 것을 제안했기 때문입니다.

@RyanCavanaugh 봇이이 문제를 닫은 이유는 무엇입니까?

놓친 것일 수 있지만 많은 해결 방법에도 불구하고 실제 답변을 볼 수 없습니까?

추신 : TypeScript v4 사용

이런 식으로 할 수 있습니다. 여기서 Props의 속성은 선택적 매개 변수이며 구성 요소에서 추가로 사용됩니다.

interface Props {
  children: ReactNode;
  properties?: Record<string, unknown>;
}

const defaultProps: Props = {
  children: '',
  properties: {
    marginTop: 32,
    marginLeft: 0,
    marginBottom: 8,
    marginRight: 0,
  },
};

const RadioListLabel: React.FC<Props> = ({
  children,
  properties = defaultProps.properties,
}) => (
  <View
    margin={[
properties ? properties.marginTop : 0
        properties ? properties.marginLeft : 0
        properties ? properties.marginBottom : 0
        properties ? properties.marginRight : 0
      ]}
  >
    <Text size="m" variant="heading2" lineHeight="body">
      {children}
    </Text>
  </View>
  )

@lakhmeranikita 이 문제의 목적은 소품 유형을 선택 사항으로 표시하지 않는 것입니다.

함수 기본 인수 또는 다른 제안을 제대로 입력하지 못했습니다. 내가 찾은 유일한 해결책은 다음과 같습니다.

import React from "react";

type DefaultProps = { optionalProp: number };
type Props = {
  requiredProp: "some_string" | "other_string";
} & DefaultProps;

export const BaseComponent = (props: Props) => {
  const { requiredProp, optionalProp } = props;
  return (
    <div>
      {requiredProp} {optionalProp}
    </div>
  );
};

BaseComponent.defaultProps = {
  optionalProp: 0,
} as Partial<DefaultProps>;

const comp = <BaseComponent requiredProp="some_string" />;