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 는 각각 구성 요소의 소품 및 상태에 대한 인터페이스 (또는 별칭)입니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

React
React, Webpack 및 Typescript 설치

수색…

비고