Foreword

In the second section , we discuss the use of TypeScript creation of Web projects in this next section, we discuss how to combine React to create a type of application with TypeScript project.

ready

Webpack configuration on the basis of the second section of the project to make some changes,

Add the depending React: react, react-dom, @ types / react and @ types / react-dom

Webpack modify configuration files

Modify webpack.base.config.js, the rest of the file and the second section consistent amended as follows:

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        'app': './src/index.tsx'
    },
    output: {
        filename: '[name].[chunkhash:8].js'
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [{
                    loader: 'ts-loader'
                }],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    optimization: { // 拆包
        splitChunks: {
            chunks: 'all'
        }
    }
}

We Entrance to index.tsx This is our React inlet assembly.

Change the index components

We will be the second section of index.ts amended as follows:

// const hello: string = 'Hello TypeScripy'
// document.querySelectorAll('.app')[0].innerHTML = hello

import React from 'react'
import ReactDom from 'react-dom'

import Hello from './Hello'

ReactDom.render(
    <Hello name='Type'/>,
    document.querySelectorAll('.app')[0]
)

Hello components

React from Import 'REACT' 

interface the Greeting { 
    name: String 
} // props used to define the interface Type 

const the Hello = (props: the Greeting) => <div> props.name the Hello {} </ div> 

Export default the Hello

Modify tsconfig.js file

Support compiler option is amended as jsx: "react"

Running the Project

npm start you can see their project has been up and running.

Github project Address: https://github.com/qixingduanyan/ts-react

You can configure their own Redux, Router and asynchronous request middleware, such as redux-saga, redux-thunk

I also configured a simple asynchronous request scaffolding: https://github.com/qixingduanyan/typescript-react-app

to sum up

This article is to explore ways to use TypeScript React project, first apply their knowledge in order to explore the principles therein.

If you want to do with TypeScript project, then this Section 5 should allow you to write more standard tsx code, should understand what TypeScript usage Yes.

My blog address: http://www.gaoyunjiao.fun/?p=140

In layman's language TypeScript (5) - used in the project TypeScript React