TypeScript와 함께 RxJS 사용

1. TypeScript 비동기 실행
2. RxJS를 사용한 반응형 프로그래밍
3. TypeScript로 RxJS 설정
4. TypeScript 내에서 RxJS 사용

TypeScript는 JavaScript가 제공하는 다른 모든 기능을 유지하면서 정적 입력 및 유형 검사를 지원하는 JavaScript 언어의 상위 집합입니다. 널리 사용되는 고급 기능 중 하나는 비동기식 프로그램 실행입니다.

현대의 응용 프로그램은 고도로 상호 작용하고 소비자 지향적입니다. 따라서 대부분의 정보를 비동기식으로 사용할 수 있습니다.

콜백, 약속 및 이벤트와 같은 비동기 논리를 처리하기 위해 TypeScript에서 여러 기술을 사용할 수 있습니다.

TypeScript 비동기 실행

콜백 함수는 비동기 코드를 처리하는 데 사용된 가장 오래된 기술입니다. 오류를 잡을 적절한 방법이 없고 콜백 지옥이 발생하고 유지 관리 문제가 발생하는 등 콜백에는 몇 가지 단점이 있었습니다.

따라서 약속의 개념이 도입되었습니다. 프라미스는 비동기 작업이 성공 또는 실패가 될 수 있는 최종 결과를 생성하는 실제 프라미스를 모방합니다.

TypeScript에서 promise 객체는 resolve 및 reject라는 두 개의 매개변수가 있는 함수를 수락하여 약속을 유지하거나 실패합니다. 이것은 비동기 프로그래밍의 큰 단계이지만 콜백 지옥 문제는 여전히 존재합니다.

게시자-구독자 기술은 비동기 이벤트를 처리하는 또 다른 인기 있는 방법입니다. 개체의 상태가 변경될 때마다 구독자 또는 관찰자에게 알림이 발생합니다.

콜백보다 비동기 작업을 처리하는 고급 방법이지만, 이벤트를 순차적으로 처리하기 위해 일련의 이벤트를 구독할 수 없고, 이벤트가 영원히 손실될 수 있는 등 몇 가지 단점이 있습니다.

RxJS를 사용한 반응형 프로그래밍

앞서 언급했듯이 이벤트 처리는 미로에서 탈출구를 찾는 것과 같습니다. 따라서 이벤트 기반 애플리케이션 구현은 번거로웠습니다.

따라서 반응형 프로그래밍 방법론이 도입되었습니다. 비동기 코드의 실행과 TypeScript에서 이벤트 기반 프로그램의 구현을 단순화했습니다.

그것은 Observable의 개념에 의존합니다. 또한 관찰자 및 반복자 패턴이 사용되었습니다.

TypeScript로 RxJS 설정

먼저 Node.js 프로젝트를 생성해야 합니다. Node.js는 공식 사이트에서 설치할 수 있습니다.

Node.js를 설치하면 자동으로 NPM이 설정됩니다. 다음과 같이 package.json 파일을 생성해 보겠습니다.

npm init

노드 프로젝트에 대한 추가 세부 정보를 입력하고 현재 기본 정보를 고수하라는 메시지가 표시됩니다.

RxJS 라이브러리는 NPM 패키지로 제공됩니다. 따라서 다음과 같이 npm으로 설치할 수 있습니다.

npm install rxjs
OR
npm i rxjs

RxJS 모듈을 포함하여 모든 타사 종속성을 유지하기 위해 별도의 node_modules 폴더를 생성합니다.

다음으로 TypeScript 컴파일러에 대한 몇 가지 기본 구성을 포함하는 TypeScript 구성 파일을 생성해야 합니다.

tsc --init

이렇게 하면 tsconfig.json이라는 새 JSON 파일이 생성됩니다. 여기에 다음 항목을 추가해 보겠습니다.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "files": [
    "rxjstest.ts",
  ]
}

여기 파일 배열에는 컴파일에 필요한 모든 파일이 포함되어 있습니다. 이 예에서는 rxjstest.ts 파일에 모든 TypeScript 논리를 작성합니다.

TypeScript 내에서 RxJS 사용

RxJS 라이브러리를 이미 설치했으므로 rxjs 모듈에서 필요한 유형과 메소드를 가져올 수 있습니다. 이 예에서는 rxjs 라이브러리에서 Observable 유형과 of 메소드를 가져옵니다.

import { of, Observable } from "rxjs";

도시의 온도 값을 게시하는 새로운 Observable 유형 개체를 만들어 보겠습니다.

const weatherPublisher : Observable<number> = of(25, 12,45,18);

weatherPublisher는 RxJS of 메소드를 사용하여 4개의 숫자 값을 생성하는 Observable 유형 개체입니다.

다음으로 weatherPublisher 옵저버블을 구독할 수 있습니다. 다음과 같이 4가지 온도를 방출합니다.

weatherPublisher.subscribe((value: number) => {
  console.log(`Temperature: ${value}`)
})

코드 작성이 완료되었으므로 다음 명령을 사용하여 rxjstest.ts 파일을 컴파일해 보겠습니다.

tsc -p ./tsconfig.json

해당 JavaScript 파일을 생성합니다. 그러면 다음과 같이 JavaScript 파일을 실행할 수 있습니다.

node rxjstest.js

출력:

Temperature: 25
Temperature: 12
Temperature: 45
Temperature: 18

RxJS 라이브러리는 TypeScript 설정에서 잘 작동합니다.