섹션 1: Typescript를 React와 함께 사용

React로 Typescript를 배우는 것은 도전적일 수 있습니다. 제 예에서 마이크로소프트를 저주하고 변수마다 any을 던졌습니다.이 시리즈의 목표는 React에서 응용 프로그램을 개발할 때 배운 지식을 기록하고 Typescript를 삽입하는 것입니다.많은 일과 마찬가지로 초기 학습 곡선은 충격적일 수 있지만, 톱니바퀴가 돌아가기 시작하면 유형 검사기를 추가하면 보답을 받을 수 있다.주의해야 할 것은: 이것은 Typescript 설정에 관한 게시물이 아닙니다.우리는 tsconfig를 가정할 것이다.json이 존재하고 코드를 유효한 JavaScript로 컴파일합니다.
우리는 카운터를 만들고 필요한 곳에 형식을 추가해서 첫 번째 부분을 완성할 것입니다.

응용 프로그램

처음부터 우리는 응용 프로그램의 프레임워크가 생겼다.

// Note, Typescript requires the whole React package to be imported.
// More information can be found: https://stackoverflow.com/a/37491916
import * as React from "react";

class App extends React.Component {
  public render() {
    return (
      <div>
        test
      </div>
    );
  }
}

유효한 React 클래스 구성 요소처럼 보이지만 일부 Typescript의 차이는 매우 뚜렷합니다.우선, React-lib이 기본적으로 내보내지지 않기 때문에, Typescript는 전체 패키지(import * as React from "react";)를 가져오라고 요구합니다.그 다음에 모든 React 방법은 public(개인 또는 보호는 작용하지 않습니다)으로 정의됩니다.render 방법과 같습니다.* 공통 * 키보드를 제거할 수도 있고 구성 요소도 작동할 수 있습니다. *나는 나의 방법과 React의 방법을 구분하는 데 도움을 주기 위해 나의 방법의 범위를 명확하게 정의하는 것을 좋아한다. 보통, 다른 필요가 없다면, 나는 나의 방법을 private으로 정의한다.이것은 강제 방법의 범위를 구성 요소에만 한정하고 불필요한 부작용을 방지한다.

상태

우리는 계수기의 상태를 저장하는 방법이 필요하다.우리 이거 이루자.

// Note, Typescript requires the whole React package to be imported.
// More information can be found: https://stackoverflow.com/a/37491916
import * as React from "react";

interface IState {
  count: number;
}

class App extends React.Component<{}, IState> {
  public readonly state = {
    count: 0
  };

  public render() {
    return (
      <div>
        {this.state.count}
      </div>
    );
  }
}

여기에는 많은 일이 발생했기 때문에 우리는 하나하나 분해할 것이다.

인터페이스

interface IState {
  count: number;
}

우선, 구성 요소 상태의 모양을 정의하는 새로운 interface을 만듭니다.
하나의 실천으로서 우리는 대문자 "I"로 인터페이스 이름을 시작합니다.이것은 우리가 변수, 유형, 인터페이스를 더욱 잘 식별할 수 있도록 대상 언어 (예: C#) 에서 빌려 온 것이다.
내가 채택한 또 다른 방법은 PascalCase에서 Typescript 형식을 정의하고camelCase에서 자바스크립트 변수를 정의하는 것이다.유형 정의를 실행 가능한 코드로 사용하는 것을 방지하는 유용한 명명 방안도 있습니다!
다음은 구성 요소의 상태를 필드count로 정의합니다.Typescript에서 부동점 0.0001과 int10 사이에는 차이가 없습니다.어떤 물건이'유사한 숫자'라고 말하려면, 우리는 그것에게 number형을 주었다.

범주 정의

class App extends React.Component<{}, IState> {

React.Component(React.PureComponent)은 일반적인 유형으로 구성 요소 도구와 상태의 모양을 제공할 수 있습니다.구성 요소는 두 개의 미리 정의된 속성(children과 ref 등)을 첨부합니다.응용 프로그램에 아무런 도구가 없기 때문에, 우리는 빈 대상을 사용할 것이다.React Typescript 정의는 우리가 전송한 형식을 기본 구성 요소 형식과 결합시키기 때문에 빈 대상이 있어도 계승된 구성 요소 도구(예를 들어children과ref)를 사용할 수 있습니다.우리 구성 요소의 상태에 대해 Typescript에서 IState에 정의된 상태 모양을 사용하고 싶다고 알려 드리겠습니다.
분해하려면 다음과 같이 하십시오.

올바른 상태를 가진 구성 요소 정의: React.Component<{}, IState>

아이템 정의 구성 요소만 사용: React.Component<IProps>

정의 상태 및 아이템: React.Component<IProps, IState>

상태 정의

public readonly state = {
  count: 0
};

마지막으로, 우리는 구성 요소의 상태를 정의합니다.지금까지 우리는 Typescript의 상태가 무엇인지만 알려주었다는 것을 명심해라.이것이 바로 우리가 React에서 실제 값을 정의하는 곳이다.React는 상태가 필요하므로 public으로 정의합니다.그 밖에 우리는 누구도 직접 상태를 바꾸기를 원하지 않기 때문에 readonly을 추가했다.상태를 직접 값 (예: this.state.count = this.state.count + 1; // Error!) 에 재할당하려고 할 때마다 Typescript 오류가 발생합니다.다음은 공통 읽기 전용 변수를 이름 상태로 정의하고 IState에서 정의한 모양과 일치하는 대상을 할당합니다.우리는 IState를 사용하여 React.Component을 상태 모양으로 정의했기 때문에, Typescript는 상태에 수치가 있는count 필드가 있어야 한다는 것을 알고 있습니다.

이벤트 추가

단추와 계수를 줄이거나 늘리는 클릭 이벤트를 추가해서 계수기를 완성합시다.

// Note, Typescript requires the whole React package to be imported.
// More information can be found: https://stackoverflow.com/a/37491916
import * as React from "react";

interface IState {
  count: number;
}

class App extends React.Component<{}, IState> {
  public readonly state = {
    count: 0
  };

  private handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const type: string = event.currentTarget.title;

    this.setState(({ count }) => ({
      count: type === "decrement" ? count - 1 : count + 1
    }));
  };

  public render() {
    return (
      <div>
        <button title="decrement" onClick={this.handleClick}>
          -
        </button>
        {this.state.count}
        <button title="increment" onClick={this.handleClick}>
          +
        </button>
      </div>
    );
  }
}

가장 큰 변화는 새로운 방법을 추가한 것이다.

private handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {

handleClick이라는 새로운 개인 방법을 만들었습니다. 이 방법은 단추를 누르면 이벤트를 처리합니다.React에서 작성 이벤트를 사용하기 때문에 React의 유형을 사용해야 합니다.이 이벤트는 마우스를 누르면 촉발되기 때문에 React.MouseEvent을 사용합니다.반응하다Mouse Event는 이벤트를 트리거하는 요소 유형을 사용하는 범용 유형입니다.우리의 예에서 이것은 기본 HTML 단추 요소입니다(HTMLButtonElement).마지막으로, 우리는 단추의 제목에 따라 계수를 늘리거나 줄인다.
우리의 카운터는 현재 TypeScript 유형을 완성했습니다!
두 번째 부분에서 계속...