React
React, Webpack 및 Typescript 설치
수색…
비고
편집기 (예 : VS 코드)에서 구문 강조를 얻으려면 프로젝트에서 사용하는 모듈에 대한 타이핑 정보를 다운로드해야합니다.
예를 들어 프로젝트에서 React와 ReactDOM을 사용한다고 가정하면 강조 표시와 Intellisense를 얻을 수 있습니다. 다음 명령을 사용하여 프로젝트에 유형을 추가해야합니다.
npm install --save @types/react @types/react-dom
이제 편집자가이 입력 정보를 자동으로 인식하여 자동 완성 및 Intellisense를 제공합니다.
webpack.config.js
module.exports = {
entry: './src/index',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.ts', '.tsx']
}
};
주요 구성 요소는 다음과 같습니다 (표준 entry
, output
및 기타 webpack 등록 정보에 추가).
로더
이를 위해 .ts
및 .tsx
파일 확장자를 테스트하고 ts-loader
를 ts-loader
로 지정하는 규칙을 만들어야합니다.
TS 확장 해석
또한 .ts
및 .tsx
확장자를 resolve
배열에 추가해야합니다. 그렇지 않으면 webpack에서 해당 배열을 볼 수 없습니다.
tsconfig.json
이 기능은 최소한의 tsconfig를 사용하여 실행 및 작동시킬 수 있습니다.
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true
}
}
하나씩 속성을 살펴 보겠습니다.
include
이것은 소스 코드의 배열입니다. 여기에는 src
디렉토리에있는 모든 항목을 컴파일에 포함하도록 지정하는 src/*
항목 만 있습니다.
compilerOptions.target
ES5 대상으로 컴파일하도록 지정합니다.
compilerOptions.jsx
이것을 true
설정하면 TypeScript가 <div />
에서 React.createElement("div")
tsx 구문을 자동으로 컴파일합니다.
compilerOptions.allowSyntheticDefaultImports
노드 모듈을 마치 ES6 모듈처럼 가져올 수있는 편리한 속성
import * as React from 'react'
const { Component } = React
너는 할 수있어.
import React, { Component } from 'react'
React에는 기본 내보내기가 없다는 오류 메시지가 표시되지 않습니다.
내 첫 번째 구성 요소
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
interface AppProps {
name: string;
}
interface AppState {
words: string[];
}
class App extends Component<AppProps, AppState> {
constructor() {
super();
this.state = {
words: ['foo', 'bar']
};
}
render() {
const { name } = this.props;
return (<h1>Hello {name}!</h1>);
}
}
const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);
React와 함께 TypeScript를 사용할 때 React DefinitelyTyped 유형 정의 ( npm install --save @types/react
)를 다운로드하면 모든 구성 요소에 유형 주석을 추가해야합니다.
당신은 이렇게 이렇게 :
class App extends Component<AppProps, AppState> { }
AppProps
및 AppState
는 각각 구성 요소의 소품 및 상태에 대한 인터페이스 (또는 별칭)입니다.