React
Typescript로 ReactJS 사용하기

Typescript로 작성된 ReactJS 구성 요소

사실 페이스 북의 예제 에서처럼 ReactJS의 컴포넌트를 Typescript에서 사용할 수 있습니다. 'jsx'파일의 확장자를 'tsx'로 바꿉니다.

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

그러나 Typescript의 주요 기능 (정적 유형 검사)을 최대한 활용하려면 다음 두 가지 작업을 수행해야합니다.

1) React.createClass 예제를 ES6 클래스로 변환합니다. Class :

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2) 다음에 소품 및 주 인터페이스 추가 :

interface IHelloMessageProps {
    name:string;
}

interface IHelloMessageState {
  //empty in our case
}

class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
  constructor(){
    super();
  }  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

이제 프로그래머가 소품을 전달하는 것을 잊어 버리면 Typescript에 오류가 표시됩니다. 또는 인터페이스에 정의되지 않은 소품을 추가 한 경우

Typescript의 Stateless React 구성 요소

소품의 순수한 기능이며 내부 상태가 필요없는 반응 구성 요소는 다음과 같이 표준 클래스 구문을 사용하는 대신 JavaScript 함수로 작성할 수 있습니다.

import React from 'react'

const HelloWorld = (props) => (
    <h1>Hello, {props.name}!</h1>
);

React.SFC 클래스를 사용하여 Typescript에서 동일한 결과를 얻을 수 있습니다.

import * as React from 'react';

class GreeterProps {
   name: string
}

const Greeter : React.SFC<GreeterProps> = props =>
    <h1>Hello, {props.name}!</h1>;

이주의 이름 React.SFC 의 별칭입니다 React.StatelessComponent 따라서는 어느 사용할 수 있습니다.

설치 및 설정

노드 프로젝트에서 타이프 스크립트와 반응을 사용하려면 먼저 npm으로 초기화 된 프로젝트 디렉토리가 있어야합니다. npm init 하여 디렉토리를 초기화하려면

npm 또는 원사를 통해 설치

다음을 수행하여 npm 을 사용하여 React를 설치할 수 있습니다.

npm install --save react react-dom

페이스 북은 Yarn 이라는 자체 패키지 관리자를 발표했다. Yan은 React 설치에도 사용될 수있다. Yarn을 설치 한 후 다음 명령을 실행하면됩니다.

yarn add react react-dom

그런 다음 React via npm을 설치 한 것과 똑같은 방식으로 프로젝트에서 React를 사용할 수 있습니다.

Typescript 2.0 이상에서 반응 유형 정의 설치

typescript를 사용하여 코드를 컴파일하려면 npm 또는 yarn을 사용하여 유형 정의 파일을 추가 / 설치하십시오.

npm install --save-dev @types/react @types/react-dom

또는 실 사용

yarn add --dev @types/react @types/react-dom

이전 버전의 Typescript에서 반응 유형 정의 설치

tsd 라고하는 별도의 패키지를 사용해야합니다.

tsd install react react-dom --save

Typescript 구성 추가 또는 변경

JSX , html / xml과 javascript를 혼합 한 언어를 사용하려면 typescript 컴파일러 구성을 변경해야합니다. 프로젝트의 typescript 구성 파일 (일반적으로 tsconfig.json )에서 JSX 옵션을 다음과 같이 추가해야합니다.

"compilerOptions": {
    "jsx": "react"
},

이 컴파일러 옵션은 기본적으로 typescript 컴파일러에게 코드에서 JSX 태그를 javascript 함수 호출로 변환하도록 지시합니다.

typescript 컴파일러가 JSX를 일반 자바 스크립트 함수 호출로 변환하지 않으려면 다음을 사용하십시오.

"compilerOptions": {
    "jsx": "preserve"
},

Stateless 및 Propertyless 컴포넌트

상태가없고 가장 속성이없는 가장 간단한 반응 구성 요소는 다음과 같이 작성할 수 있습니다.

import * as React from 'react';

const Greeter = () => <span>Hello, World!</span>

그러나 typescript는 반응 요소인지 여부를 알 수 없으므로 해당 구성 요소는 this.props 액세스 할 수 없습니다. 소도구에 액세스하려면 다음을 사용하십시오.

import * as React from 'react';

const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

구성 요소에 명시 적으로 정의 된 속성이 props.children 모든 구성 요소에 본질적으로 props.children 있으므로 props.children 액세스 할 수 있습니다.

stateless 및 property-less 구성 요소의 또 다른 비슷한 장점은 단순한 페이지 템플리트에 있습니다. 다음은 이미 프로젝트에 가상 Container , NavTop 및 NavBottom 구성 요소가 있다고 가정하고 간단한 간단한 Page 구성 요소입니다.

import * as React from 'react';

const Page: React.SFC<{}> = props => () => 
    <Container>
        <NavTop />
        {props.children}
        <NavBottom />
    </Container>

const LoginPage: React.SFC<{}> = props => () =>
    <Page>
        Login Pass: <input type="password" />
    </Page>

이 예제에서 Page 구성 요소는 나중에 다른 실제 페이지에서 기본 템플릿으로 사용할 수 있습니다.