深刻淺出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

　　

修改tsconfig.js文件

支持編譯選項修改成 jsx: "react"

運行項目

npm start能夠看到本身的項目已經運行起來。

項目的github地址： https://github.com/qixingduanyan/ts-react

你們能夠本身配置Redux、Router以及異步請求中間件，好比redux-saga、redux-thunk

我本身也配置了一個簡易的異步請求腳手架： https://github.com/qixingduanyan/typescript-react-app

總結

這篇文章主要是探討React項目中使用TypeScript的方式，首先學以至用，才能去探究其中的原理。

若是你想要用TypeScript來作項目，那麼這5小節應該能夠使你寫出比較標準的tsx代碼，也應該明白了TypeScript的用法是什麼。

個人博客地址：http://www.gaoyunjiao.fun/?p=140