TypeScript를 사용하는 React.Js의 Tagged Union 및 소품을 존중하는 방법.

프론트엔드 애플리케이션을 작성하기 위해 Elm 또는 ReasonML과 같은 언어를 사용한 적이 있다면 Tagged Union, Variants 또는 Discriminated Union이라는 용어에 익숙할 것입니다. 하지만 그렇지 않은 경우 제가 무엇인지 보여드리겠습니다. 참조:

-- Full code example at: https://ellie-app.com/cYzXCP7WnNDa1

-- FieldType is a Tagged union.
type FieldType
  = Editable
  | ViewOnly

init : () -> (Model, Cmd Msg)
init _ =
    (
      initial,
      (ViewOnly, "Welcome to ELM")
        |> Task.succeed
        |> Task.perform Init
    )

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Init (kind, value) ->
      (
        { model | value = value, kind = kind }
        , Cmd.none
      )

    Handle value ->
      (
        { model | value = value }
        , Cmd.none
      )


view : Model -> Html Msg
view { kind, value } =
    case kind of
        Editable ->
          div []
            [
              input [onInput Handle] []
            , h1 [] [text ("Value: " ++ value)]
            ]

        ViewOnly ->
          div [] [  h1 [] [ text value ] ]

위의 코드는 데이터 유형을 기반으로 애플리케이션 모델링에 대해 이야기할 때 Elm의 주요 강점 중 하나를 보여줍니다.

모든 상용구를 두려워하지 마십시오. 여기서 요점은 우리가 어떻게 완전히 불가지론적인지view인 동시에 우리 모델이 결정되지 않은 상태에 있거나 누락된 소품이 있을 수 없고 없을 것이라고 100% 확신하는 것입니다. , 절대.

우리의 모델 속성kind은 FieldType와 다른 어떤 것도 포함하지 않을 것이며 Elm 컴파일러의 도움으로 우리는 우리의 보기가 신뢰할 수 있고 항상 필요한 모든 데이터를 가질 것이라는 확신을 가질 수 있습니다.

타이프스크립트

오늘날 Typescript는 일부 런타임 오류를 최소화하는 데 도움이 되는 도구로 광범위하게 사용되어 왔으며 Javascript 코드인 불확실성의 바다 안에서 우리 데이터가 정확히 무엇인지에 대한 보장을 제공합니다.

즉, Typescript 코드 기반을 사용하는 일부 React에서 구성 요소가 얼마나 일반적으로 검증되는지 살펴보겠습니다.

// FieldType could also be just the strings values.
enum FieldType {
  VIEW_ONLY = "viewOnly",
  EDITABLE = "editable"
};

type Props = {
  kind: FieldType;
  onChange: (_: ChangeEvent<HTMLInputElement>) => void;
  name?: string;
  value: string;
};

const Field: VFC<Props> = (props) => {

// ...component implementation
};

컴파일러는 필수 props 없이 구성 요소를 사용하는 것을 방지하지만 편집할 수 없는 필드만 원할 경우 onChange 함수가 정말로 필요합니까?

팀에 합류한 새로운 구성원은 어떻습니까? 코드 베이스의 모든 구성 요소에 대한 깊은 이해가 없는 사람이 다른 곳에서 사용하려고 할 때 이 구성 요소는 어떻게 작동합니까?

물론 위의 코드는 단순한Field 구성 요소를 보여주고 있으며 코드를 읽는 것에 대해 추론할 수는 없지만 각 구성 요소의 동작인 props를 존중하고 싶다면 좋은 구현과는 거리가 멉니다. 구현의 종류와 다른 곳에서 필요할 때 실행 방법.

구조를 위해 태그된 노동 조합.

"Talk is cheap, show me the code", Linus Torvalds

enum FieldType {
  VIEW_ONLY = "viewOnly",
  EDITABLE = "editable"
};

type BaseProps = {
  kind: FieldType;
  name?: string;
  value: string;
};

type Editable = {
  kind: FieldType.EDITABLE;
  onChange: (_: ChangeEvent<HTMLInputElement>) => void;
} & BaseProps;

type ViewOnly = {
 kind: FieldType.VIEWONLY;
} & BaseProps;

type Props = ViewOnly | Editable;

const Field: VFC<Props> = (props) => {
  const { value, name, kind } = props;
  const { onChange } = props as Editable;

  // ...component implementation
}

이제 우리는 몇 가지 추가 유형의 상용구를 가지고 있지만 구성 요소가 구현되었을 때 의도했던 것처럼 구성 요소 props는 알려진FieldType에 의해 존중되고 시행됩니다. 이제 속성 없이 구성 요소를 호출하려고 하면 어떻게 될까요? 무슨 일이 일어날 것?

음, 처음에는 Typescript가 컴파일 시간에 오류를 표시합니다.

Type '{}' is not assignable to type '(IntrinsicAttributes & { kind: FieldType.VIEW_ONLY; } & DefaultProps) | (IntrinsicAttributes & { kind: FieldType.EDITABLE; onChange: (_: ChangeEvent<...>) => void; } & DefaultProps)'.
  Type '{}' is missing the following properties from type '{ kind: FieldType.EDITABLE; onChange: (_: ChangeEvent<HTMLInputElement>) => void; }': type, onChange

그런 다음 속성kind에 알려진FieldType 속성을 제공하면 구성 요소가 예상대로 작동하는 데 필요한 모든 것을 갖추도록 여전히 제공해야 하는 속성이 표시됩니다.

...
Property 'onChange' is missing in type '{ kind: FieldType.EDITABLE; }' but required in type '{ kind: FieldType.EDITABLE; onChange: (_: ChangeEvent<HTMLInputElement>) => void; }'.

이제 Field component 렌더에서 매핑된 개체 또는 스위치 케이스를 사용하기만 하면 됩니다. 이는 적용된 propkind을 기반으로 하고 태그가 지정된 유니온에 의해 적용된 nullable 또는 not nullable props가 주어지면 다음을 보여줍니다. 처리, 형식화 또는 처리할 필요가 있는 것과 필요하지 않은 것이 정확히 무엇인지.

재사용성을 위해 FieldType 열거형을 types/field 또는 types/components 로 이동할 수 있습니다.

다음은 푸어포즈에 대한 구현입니다.

마지막 생각들

IMHO는 Typescript 컴파일러를 실제로 사용하여 코드를 작성하는 데 도움이 되는 가장 좋은 방법 중 하나입니다.

nullable 또는 non nullableprops 값 내에서 구성 요소의 유효성을 검사할 뿐만 아니라 적절한 구현을 지원하는 동시에 코드 기반을 사용, 유지 관리 및 업데이트할 사람을 고려합니다.