深入浅出TypeScript（5）- 在React项目中使用TypeScript

前言

在第二小节中，我们讨论了利用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