typed - 'type' 또는 'interface'로서의 소품

typed - 'type' 또는 'interface'로서의 소품

리액트 코드가 있다

export default class MyComponent extends Component<Props,State>

문제는 제가 소품 같은 걸 쓸까요?type또는interface?

type Props = {
    isActive: Boolean,
    onClick: Function
}

또는

interface Props {
    isActive: Boolean,
    onClick: Function
}

또, 타이프 스크립트가 아니고, 클래식한 Web pack+babel 셋업을 사용하고 있는 경우는, 어떤 차이가 있습니까?

아니면, 그게 미에게 중요한가?

지금은 2020년이고 나는 지금 이 순간에도type거의 모든 경우에React소품(일반형 vs 인터페이스 포스트는 이쪽).타입 에일리어스로만 표현할 수 있는 일반적인 케이스:

// given some props from another comp that are to be altered
type ExternalProps = { a: string; b: { c: number } };

type Props_IndexType = ExternalProps["b"]; // { c: number; }
type Props_MappedType = { [K in keyof ExternalProps]: number }; // { a: number; b: number; }
type Props_DiscriminatedUnionType = { tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean}
type Props_typeOf = { foo: string } & typeof defaultProps; // see class comp example

// conditional types - ok, this one is a bit contrived, but you get the point
type Props_ConditionalType<T> = T extends true ? { a: string } : { b: number };
const Comp = <T extends {}>(props: Props_ConditionalType<T>) =>
  <div>{"a" in props && (props as any).a}</div>
render(<Comp<true> a="foo" />, document.getElementById("root"));

예를 들어 클래스 컴포넌트의 예를 나타냅니다(OP에서는 이러한 컴포넌트를 언급하고 있습니다만, 위의 경우는 Hook에도 적용됩니다).

// cannot do that with interfaces
type Props = ({ tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean }) &
  typeof defaultProps;
type State = typeof initState;

const defaultProps = { a: "A" };
const initState = { c: "C" };

class App extends React.Component<Props, State> {
  static readonly defaultProps = defaultProps;
  state = initState;

  render() { ... }
}

render(<App tag="tag1" foo="foo" />, document.getElementById("root"));

인터페이스를 생각할 수 있는 유일한 경우:

• 글로벌 범위에서 소품 유형의 선언 병합을 수행합니다(요즘 일반적이지 않음).
• 인터페이스가 오류 메시지, IDE 유형 정보(docs) 등에서 사용되는 새 이름을 만들 때 유형 구현 세부 정보를 숨깁니다.

인터페이스는 대응하는 타입 선언보다 조금 강력하지만 리액트 소품 세트에서는 문제가 되지 않을 수 있습니다.타입과 인터페이스의 차이에 대해서는, 이 질문을 참조해 주세요.

그 인터페이스를 확장하거나 다른 곳에서 증강하는 일은 거의 없기 때문에, 어느쪽을 사용해도 괜찮습니다.그러나 오브젝트 타입의 정의에는 일반적으로 인터페이스가 더 유연하기 때문에 인터페이스가 선호됩니다.

언급URL : https://stackoverflow.com/questions/49562569/typed-react-props-as-type-or-an-interface