RxJS 및 TypeScript를 사용한 양식 처리

RxJS와 TypeScript는 최근 점점 유행하고 있다.이 두 기술을 개별적으로 사용하거나 심지어 모든 JavaScript 라이브러리 또는 프레임워크의 일부로 사용할 수 있습니다.
RxJS 프로젝트가 TypeScript를 적극적으로 사용하고 있다는 것을 알게 된 것은 라이브러리가 자바Script에서 이전할 때 버그를 발견하는 데 도움을 준 흥미로운 사실이다.
본 논문에서 TypeScript와 RxJS를 사용하여 HTML 폼을 처리하는 반응식 방법을 볼 수 있습니다.

HTML 양식

이제 웹 응용 프로그램에서 HTML 양식이 널리 사용됩니다.사용자를 등록하고 연락처를 통해 메시지를 보내거나 사용자로부터 어떤 데이터를 수집하고 싶을 때마다, 그것들은 반드시 없어서는 안 된다.또한 HTML 용어집은 양식을 간단한 구문으로 정의하는 데 도움을 줍니다.

<form>
   Add HTML Form Controls here: text input, checkboxes, etc
</form>

HTML 양식 컨트롤 요소는 HTML 양식 컨텍스트에서 이벤트를 수신하거나 데이터를 수집하는 데 사용됩니다.

간단한 로그인 폼

간단한 양식으로 시작하겠습니다.

이것은 아마도 간단한 형식일 것이다.그러나 개발자의 입장에서는 다른 방법으로 그것을 처리할 수 있다.

양식 정의

다음과 같은 로그인 양식 구현을 고려해 보겠습니다.

<div class="container">
  <form class="form">
    <div class="form-group">
      <label for="email">Email address</label>
      <input type="email" class="form-control" id="email" />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" />
    </div>
    <button id="submit" type="button" class="btn btn-primary">Submit</button>
  </form>
</div>

앞의 코드는 Bootstrap를 사용했는데 이것은 기능이 강한 CSS 프레임워크로 몇 가지 기존의 스타일을 포함한다.

타자 스크립트 모형

TypeScript는 양호하고 안전한 타자입니다.데이터 모델에 대한 인터페이스를 정의할 수 있습니다.

// user.ts
export interface User {
  email?: string;
  password?: string;
}

그런 다음 새 변수를 정의하여 사용자 모델을 포함할 수 있습니다.

let userModel: User = {};

DOM 요소

데이터 모델을 정의했기 때문에 DOM 요소에 액세스할 수 있는 변수를 정의할 때가 되었습니다.

// DOM Elements - declaration
let buttonElement: HTMLButtonElement;
let emailInput: HTMLInputElement;
let passwordInput: HTMLInputElement;

이러한 변수는 태그에 정의된 HTML 양식 컨트롤을 참조할 준비가 되었습니다.각 변수의 유형에 유의하십시오.
코드의 어느 시점에 DOM 요소를 가져와야 합니다.

// DOM elements - assignation
buttonElement = document.getElementById("submit") as HTMLButtonElement;
emailInput = document.getElementById("email") as HTMLInputElement;
passwordInput = document.getElementById("password") as HTMLInputElement;

JavaScript World에서 우리는 getElementById 방법을 사용하여 주어진 id 속성과 관련된 요소를 얻을 수 있습니다.당신도 querySelector() 방법을 대체 방법으로 사용할 수 있습니다.
여기서 주의해야 할 점은 document.getElementById 대상이 HTMLElement 되돌아온다는 것이다.이것은 모든 HTML 요소를 나타내는 인터페이스입니다.
즉, TypeScript의 type assertion를 사용하는 것이 가장 좋은 공통 유형이 있습니다.

// as-syntax
buttonElement = document.getElementById("submit") as HTMLButtonElement;

// angle-bracket syntax
buttonElement = <HTMLButtonElement>document.getElementById("submit");

DOM 이벤트는 관찰할 수 있습니다.

JavaScript에서 DOM 이벤트를 처리하는 방법 중 하나는 통과Event Listener입니다.예를 들어, 버튼의 클릭 이벤트를 처리하려면 다음과 같이 하십시오.

buttonElement.addEventListener('click', function() {
  // Handle click event here
});

그러나 반응식 프로그래밍 방법에서 우리는 흐름Observables을 고려해야 한다.
이제 입력(HTML 입력 요소) 및 클릭(HTML 버튼 요소) 등 현재 처리할 수 있는 각 이벤트를 다음과 같이 정의합니다.

// DOM events as Observables - declaration
let emailChange$: Observable<InputEvent>;
let passwordChange$: Observable<InputEvent>;
let submit$: Observable<MouseEvent>;

각 변수 유형에 사용된 Generic Types에 다시 한 번 주의하십시오.이러한 범주 유형은 TypeScript 컴파일러가 관찰할 수 있는 객체의 특정 객체 유형을 통과시킨다는 것을 알려줍니다.또한 코드 약정에 따라 $ 기호는 변수 이름의 끝에 사용하여 흐름을 나타낸다.
우리는 관측치를 분배하는 데 필요한 변수가 있다.RxJS의 fromEvent 조작부호를 사용할 때가 되었다. 이벤트를 관찰 가능한 이벤트로 바꿀 수 있다.

// DOM events as Observables - assignation
emailChange$ = fromEvent<InputEvent>(emailInput, "input");
passwordChange$ = fromEvent<InputEvent>(passwordInput, "input");
submit$ = fromEvent<MouseEvent>(buttonElement, "click");

fromEvent는 creation operator로 일반적인 유형이 없는 상황에서 사용할 수 있다.

submit$ = fromEvent(buttonElement, "click"); // Observable<Event>

단점이 뚜렷하다. 우리는 통용되는 유형이 있을 것이며, 앞으로는 유형 단언으로 대상을 정확하게 처리해야 할 수도 있다.

관찰할 수 있는 이벤트에 가입

e-메일 값을 스트리밍으로 처리해 보겠습니다.

emailChange$
  .pipe(map((event: InputEvent) => (event.target as HTMLInputElement).value))
  .subscribe(email => {
    console.log("email Value: ", email);
    userModel.email = email;
  });

이것이 바로 지금 벌어지고 있는 일이다.

emailChange$는 관찰 가능한 변수입니다.상상해 봐. 너는 처리할 수 있는 데이터 흐름이 하나 있다.당신은 그것들을 어떻게 처리할 계획입니까?함수(RxJS의 파이핑 가능 연산자)를 사용합니다.

.pipe () 함수는 연산자를 동시에 사용할 수 있는 읽을 수 있는 방법을 제공합니다.예를 들어, 당신은 리눅스 명령의 '조합' 을 사용할 수 있습니다. ls -l | grep 'json | sort 그 중에서 | 을 하나의 파이프로 사용하여 하나하나 조작이나 동작을 수행할 수 있습니다.

map () 연산자는 첫 번째 위치에 있습니다. HTMLInputElement (입력 필드) 에서value 속성을 추출할 수 있습니다.

사건.event.target는 기본적으로 EventTarget 인터페이스를 되돌려주고, HTMLInputElement 인터페이스는 <input> 요소의 방법과 속성을 제공하기 때문에 목표를 HTMLInputElement으로 설정해야 한다.

subscribe () 호출은 관찰 가능한 대상을 호출하는 '필수' 호출입니다.그것의 행동은 함수를 호출할 때와 유사하다.

Observable를 호출하면 email 값을 되돌려주고 User 모델을 업데이트할 수 있습니다.

암호 값 변경을 처리하는 데 동일한 논리를 적용할 수 있습니다.

passwordChange$
  .pipe(map((event: InputEvent) => (event.target as HTMLInputElement).value))
  .subscribe(password => {
    console.log("password Value:", password);
    userModel.password = password;
  });

최종 값 지정userModel.password 속성을 참조하십시오.
너는 이곳의 잠재적인 개선을 알아맞힐 수 있니?전자 우편과 암호 값 처리는 같다.다음과 같이 코드가 반복되지 않도록 공통 함수를 만들 수 있습니다.

function getValueFromInputEvent(
  event: Observable<InputEvent>
): Observable<string> {
  return event.pipe(
    tap(event => console.log("event.target", event.target)),
    map((event: InputEvent) => (event.target as HTMLInputElement).value)
  );
}

이전 함수는 하나Observable<InputEvent>를 수신하고 문자열 값을 관찰 가능한 값으로 되돌려줍니다!
이 함수를 emailChange$ 흐름에 적용합니다.

emailChange$.pipe(getValueFromInputEvent).subscribe(email => {
  console.log("email Value: ", email);
  userModel.email = email;
});

이것은 간단한 판본이어서 읽기도 더욱 쉽다.같은 함수를 처리 passwordChange$ 흐름에 적용할 수 있습니다.
마지막으로, 우리는 '클릭' 사건을 처리할 준비가 되어 있다.같은 논리에 따라 우리는 마지막으로 구독하고 사용자 모델을 처리할 것이다.

submit$
  .pipe(tap((event: MouseEvent) => console.log(event)))
  .subscribe(() => console.log("Sending User", { userModel }));

소스 코드 항목

실행 중인 전체 항목 찾기StackBlitz.브라우저의 콘솔을 열어 결과를 보는 것을 잊지 마세요.
너는 계속해서 나GitHub를 주목하고 나의 일에 대해 더 많은 정보를 얻을 수 있다.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소,GraphQL,Node,Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 방문thisdotlabs.com하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co를 참조하십시오.