정확하게 입력한 React 구성 요소를 TypeScript로 작성하는 방법

작성자 Piero Borrelli✏️
만약 당신이 소프트웨어 개발자라면, 특히 자바스크립트를 쓴다면, 당신은 아마 들은 적이 있을 것이다 TypeScript.이 기술에 대해 이미 수백 개의 과정, 논단 토론과 회담을 개설하였는데, 사람들의 흥미는 여전히 증가하고 있다.
TypeScript는 Microsoft에서 개발한 엄격하고 유형화된 JavaScript 초집합입니다.그것은 기본적으로 우리가 모두 알고 있는 흔히 볼 수 있는 자바스크립트 코드 라이브러리에서 시작하여 자바스크립트 파일로 컴파일하고 매우 멋진 기능을 추가했다.
자바스크립트는 동적 유형의 언어로 좋아하든 싫어하든 매우 위험한 행위일 수 있다.사실상, 어떤 실체가 예상대로 사용되지 않을 때, 그것은 우리의 프로그램에서 미묘한 문제를 일으킬 수 있다.
TypeScript를 사용하면 정적 유형을 도입하여 이러한 오류를 방지할 수 있습니다.이 메커니즘은 모든 종류의 오류가 코드를 실행하지 못하게 하기 때문에 대량의 디버깅 시간을 절약할 것입니다.또한 유형의 사용은 완전히 선택할 수 있다는 것을 주의해야 한다.코드에 필요하다고 생각하기만 하면 분리해서 사용할 수 있습니다.
TypeScript를 사용하면 브라우저 지원 걱정 없이 최신 ES6 및 ES7 기능을 사용할 수 있습니다.컴파일러는 자동으로 ES5로 변환하여 프로젝트의 더 중요한 부분에 집중할 수 있는 공간을 제공하고 브라우저 호환성을 테스트하는 시간을 절약합니다.

TypeScript를 다른 기술과 통합

직감적으로 알 수 있듯이 TypeScript는 프로젝트를 진정으로 바꿀 수 있습니다. 특히 프로젝트의 규모가 커지고 최선의 관리 선택을 원한다면.TypeScript를 사용 중인 다른 기술과 통합하는 방법을 알고 싶을 수도 있습니다.
이런 상황에서 이 언어 자체는 많은 프레임워크에 대한 지원을 제공함으로써 뜻대로 된다.이 안내서에서 우리는 이러한 놀라운 언어를 가장 유행하는 전단 프레임워크에 통합시키는 방법을 이해할 것이다.

React 사례

TypeScript는 React 응용 프로그램에서 사용할 때 현재 최상의 상태입니다.제품 관리, 가독성 및 안정성을 향상시키기 위해 사용할 수 있습니다.통합이 매우 간단해졌습니다. 이런 상황에서 제가 당신에게 건의한 것은 당신이 가장 좋아하는 환경을 설정하여 본고에서 제시한 예시를 시도하는 것입니다.
모든 것이 준비되면 새로운 TypeScript+React 통합을 탐색할 수 있습니다.

유형화 기능 구성 요소

기능 구성 요소는 가장 인기 있는 React 기능 중의 하나입니다.그것들은 우리의 데이터를 보여주는 매우 간단하고 실용적인 방식을 제공했다.이러한 유형의 구성 요소는 다음과 같이 TypeScript에서 정의할 수 있습니다.

import * as React from 'react'; // to make JSX compile

const sayHello: React.FunctionComponent<{
  name: string;
}> = (props) => {
  return <h1>Hello {props.name} !</h1>;
};

export default sayHello;

여기에서 우리는 정식 입력React.FunctionComponent이나 그 별명React.FC이 제공하는 범형을 사용하고 우리 도구의 예상 구조를 정의합니다.우리의 예에서, 전송된 이름을 화면에 보여주는 문자열 형식의 간단한 프로필이 필요합니다.
우리는 또 다른 방식으로 위에서 언급한 도구를 정의할 수 있다. TypeScript 정의 인터페이스를 사용하여 모든 도구에 유형을 지정한다.

interface Props {
  name: string
};

const sayHello: React.FunctionComponent<Props> = (props) => {
  return <h1>{props.name}</h1>;
};

또한 React.FunctionComponent 를 사용하면 TypeScript가 React 구성 요소의 상하문을 이해하고 기본 React가 제공하는 도구(예를 들어 하위 도구)를 사용하여 사용자 정의 도구를 강화할 수 있습니다.

유형화 클래스 구성 요소

React에서 구성 요소를 정의하는 이전 방법은 클래스로 정의하는 것입니다.이런 상황에서 우리는 도구를 관리할 수 있을 뿐만 아니라 상태도 관리할 수 있다React 16의 최신 버전 이후 상황이 변했더라도).
이러한 유형의 구성 요소는 기본 React.Component 클래스에서 확장되어야 합니다.TypeScript는 범용, 전달 도구 및 상태를 통해 이 클래스를 강화합니다.따라서 위에서 설명한 것과 유사하게 TypeScript를 사용하여 클래스 구성 요소를 다음과 같이 설명할 수 있습니다.

import * as React from 'react';

type Props {}
interface State {
  seconds: number;
};
export default class Timer extends React.Component<Props, State> {
  state: State = {
    seconds: 0
  };
  increment = () => {
    this.setState({
      seconds: (this.state.seconds + 1)
    });
  };
  decrement = () => {
    this.setState({
      seconds: (this.state.seconds - 1)
    });
  };
  render () {
    return (
      <div> <p>The current time is {this.state.seconds}</p> </div>
    );
  }
}

건조사

구조 함수와 관련이 있을 때 props를 전달해야 합니다(없더라도). TypeScript는 구조 함수super에 전달할 것을 요구합니다.
그러나 TypeScript의 엄격한 모드에서 super 호출을 실행할 때 유형 규범을 제공하지 않으면 오류가 발생합니다.이것은 새 구조 함수를 사용하여 새 클래스를 생성하기 때문에 TypeScript는 어떤 인자가 필요한지 알 수 없습니다.
따라서 TypeScript는 유형을 any 로 추정하고 엄격한 모드에서 암시적 any 을 허용하지 않습니다.

export class Sample extends Component<MyProps> {
  constructor(props) { // ️doesn't work in strict mode
    super(props)
  }
}

그래서 우리는 우리의 도구 유형을 명확히 해야 한다.

export class Sample extends Component<MyProps> {
  constructor(props: MyProps) {
    super(props)
  }
}

기본 아이템

기본 속성을 사용하면 도구의 기본값을 지정할 수 있습니다.우리는 여기서 하나의 예를 볼 수 있다.

import * as React from 'react';

interface AlertMessageProps {
  message: string;
}

export default class AlertMessage extends React.Component<Props> {
  static defaultProps: AlertMessageProps = {
    message: "Hello there"
 };

  render () {
    return <h1>{this.props.message}</h1>;
  }
}

컨텍스트 입력

일반적으로, React 응용 프로그램에서 데이터는 아버지와 하위 방법의 도구를 통해 모든 구성 요소에 전달됩니다.그러나 일부 유형의 정보(사용자 선호, 일반 설정 등)에 대해 문제가 발생할 수 있습니다.
트리에 데이터를 전달하는 모든 단계를 피할 수 있는 방법을 제공했다.예를 들어 JavaScript 및 TypeScript를 사용합니다.

Javascript

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Using a Provider to pass the current theme to the tree below.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// Middle component doesn't need to pass our data to its children anymore
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
// React here will find the closest theme Provider above and use its value("dark")
class ThemedButton extends React.Component {
  // contextType to read the current theme context
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

타자 스크립트

TypeScript에서 이 기능을 사용하면 각 컨텍스트 인스턴스만 입력할 수 있습니다.

import React from 'react';

// TypeScript will infere the type of this properties automatically
export const AppContext = React.createContext({ 
  lang: 'en',
  theme: 'dark'
});

이런 상황에서 우리는 유용한 오류 메시지를 볼 수 있다.

const App = () => {
  return <AppContext.Provider value={ {
    lang: 'de', 
  // Missing properties ERROR
  } }>
    <Header/>
  </AppContext.Provider>
}

사용자 정의 연결 입력

개발자가 사용자 정의 연결을 구축하는 능력은 확실히 React의 킬러급 기능 중의 하나이다.
사용자 정의 갈고리는 React 갈고리의 핵심을 자신의 함수에 통합시키고 논리를 추출할 수 있도록 합니다.이 갈고리는 다른 JavaScript 함수처럼 공유하고 가져오기 쉬우며, 핵심 React 갈고리와 같은 행동을 하며 일반적인 규칙을 따를 것입니다.
입력한 사용자 정의 갈고리를 보여주기 위해 React docs 에서 기본 예제를 선택하고 TypeScript 기능을 추가했습니다.

import React, { useState, useEffect } from 'react';

type Hook = (friendID: number) => boolean;

// define a status since handleStatusChange can't be inferred automatically
interface IStatus {
  id: number;
  isOnline: boolean;
}

// take a number as input parameter
const useFriendStatus: Hook = (friendID) => {
  // types here are automatically inferred
  const [isOnline, setIsOnline] = useState<boolean | null>(null);

function handleStatusChange(status: IStatus) {
  setIsOnline(status.isOnline);
}
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  return isOnline;
}

유용한 리소스

여기에서 React가 있는 TypeScript를 사용하기 시작하려면 다음 리소스를 참조하여 유용한 리소스 목록을 컴파일했습니다.

Official TypeScript docs

Composing React components using TypeScript

The latest React updates

A beginner guide to TypeScript

결론

나는 TypeScript가 한동안 존재할 것이라고 굳게 믿는다.수천 명의 개발자들이 그것을 어떻게 사용하는지 배우고 그들의 프로젝트에 통합시켜 그들의 능력을 향상시키고 있다.우리의 예에서 우리는 이런 언어가 어떻게 더 좋고 관리하기 쉬우며 읽기 쉬운 응용 프로그램을 작성하는 절호의 동반자가 되는지 알게 되었다.
이런 문장이 더 많으니 제 대로 하세요.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물How to write correctly typed React components with TypeScript이 먼저 LogRocket Blog에 올라왔다.