前言

在第二小节中，我们讨论了利用TypeScript创建Web项目的实现，在本下节，我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目。

准备

Webpack配置在第二小节项目的基础上做了一些修改，

添加React相关依赖：react、react-dom、@types/react 和@types/react-dom

修改Webpack配置文件

修改webpack.base.config.js，其余文件和第二小节保持一致，修改如下：

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'         }     } }

我们把入口设置为index.tsx这是我们的React入口组件。

更改index组件

我们将第二小节中的index.ts修改如下：

// 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组件

import React from 'react'  interface Greeting {     name: string } // 使用接口来限定props的类型  const Hello = (props: Greeting) => <div>Hello {props.name}</div>  export default Hello