前言
在第二小节 http://www.gaoyunjiao.fun/?p=119 中, 我们讨论了利用 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
我自己也配置了一个简易的异步请求脚手架:
总结
这篇文章主要是探讨 React 项目中使用 TypeScript 的方式, 首先学以致用, 才能去探究其中的原理.
如果你想要用 TypeScript 来做项目, 那么这 5 小节应该可以使你写出比较标准的 tsx 代码, 也应该明白了 TypeScript 的用法是什么.
我的博客地址: http://www.gaoyunjiao.fun/?p=140
来源: https://www.cnblogs.com/qixingduanyan/p/11484243.html