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
구성 요소는 나중에 다른 실제 페이지에서 기본 템플릿으로 사용할 수 있습니다.